zoukankan      html  css  js  c++  java
  • vue.js编程式路由导航 --- 由浅入深

    编程式路由导航

    实例中定义一个方法,这个方法绑定在标签上

    然后就设置路由跳转


    语法 this.$router.history.push('要跳转路由的地址')

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .active{
                color:red;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <!--编程时导航-->
        <button @click="goHome">去首页</button>
        <button @click="goList">去列表</button>
        <router-view></router-view>
    </div>
    </body>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        let home={
            template:'<div>home</div>'
        };
        let list={
            template:'<div>list</div>'
        }
        const routes=[
            {path:'/home',component:home},
            {path:'/list',component:list}
        ]
    
        let router=new VueRouter({
            routes:routes,
            linkActiveClass:'active'
        });
        //默认加载第一个路径
        router.push("/home");
        let vm=new Vue({
            el:"#app",
            methods:{
                //编程时导航
                goHome(){
                    //页面跳转,push是增加到历史管理
                   this.$router.history.push('/home')
                    //go表示前进后退
                    //this.$router.history.go(-1)
                },
                goList(){
                    this.$router.history.push('/list')
                    //将当前历史管理替换成list
                    //this.$router.history.replace('/list')
                }
            },
            // 会在实例中提供两个属性this.$route(属性),this.$router(方法);
            router:router,
    
    
        })
    </script>
    </html>

    如果文章有帮助到您,请点右侧的推荐关注哈,O(∩_∩)O谢谢~ >>>>

  • 相关阅读:
    Jenkins知识地图
    PageObject&PageFactory
    robot framework-databaselibaray库使用(python)
    robot framework环境搭建
    使用instantclient_11_2 和PL/SQL Developer工具包连接oracle 11g远程数据库(转)
    (转)pip和easy_install使用方式
    图解:如何在LINUX中安装VM-Tools
    ANT简明教程[转载]
    Linux常用命令
    oracle数据分组
  • 原文地址:https://www.cnblogs.com/null11/p/7486749.html
Copyright © 2011-2022 走看看