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谢谢~ >>>>

posted @ 2017-09-06 20:19  八bug哥哥  阅读(5250)  评论(0)  编辑  收藏  举报