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

  • 相关阅读:
    leetcode 131. Palindrome Partitioning
    leetcode 526. Beautiful Arrangement
    poj 1852 Ants
    leetcode 1219. Path with Maximum Gold
    leetcode 66. Plus One
    leetcode 43. Multiply Strings
    pytorch中torch.narrow()函数
    pytorch中的torch.repeat()函数与numpy.tile()
    leetcode 1051. Height Checker
    leetcode 561. Array Partition I
  • 原文地址:https://www.cnblogs.com/null11/p/7486749.html
Copyright © 2011-2022 走看看