vueRouter-动态路由匹配
vueRouter-动态路由匹配
tianyawhl 发表于2个月前
vueRouter-动态路由匹配
  • 发表于 2个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

华为云·免费上云实践>>>   

我们经常需要把某种模式匹配到的所有路由,全都映射到同一个组件,例如,我们有一个User组件,对于所有ID各不相同的用户,都要使用这个组件来渲染,那么我们可以在vue-router的路由路径中使用动态路径参数(dynamic segment)来达到这个效果

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo11">foo</router-link>
            <router-link to="/user/bar11">bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
    const User = {
        template: `<div>{{$route.params.id}}</div>`
    }
    const router = new VueRouter({
        routes: [
            { path: "/user/:id", component: User }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    //id 代表user下一级别的文字
    //{{$route.params.id}}显示foo11 或者 bar11,即点击foo时显示foo11,点击bar显示bar11
    </script>
</body>

现在呢,像 /user/foo11 和 /user/bar11 都将映射到相同的路由。

你可以在一个路由中设置多段路径参数,对应的值都会设置到$route.params中,例如
模式 /user/:username              匹配路径 /user/evan               $route.params   {username:"evan"}
模式/user/:username/post/:post_id   匹配路径 /user/evan/post/123  $route.params {username:"evan",post_id:123}
除了$route.params外,$route对象还提供了其它有用的信息,例如,$route.query(如果URL中有查询参数)、$route.hash等等
响应路由参数的变化,提醒一下,当使用路由参数时,例如从/user/foo导航到user/bar,原来的组件实例会被复用,因为2个路由都渲染同一个组件,比起销毁再创建,复用则显得更加高效,不过,这也意味着组件的生命周期钩子不会再被调用,复用组件时,想对路由参数的变化做出响应的话,你可以简单的watch(监测变化)$route对象

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo11">foo</router-link>
            <router-link to="/user/bar11">bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
    const User = {
        template: `<div>{{$route.params.id}}</div>`,
        watch:{
            "$route" (){
                alert(this.$route.params.id)
            }
        }
    }
    const router = new VueRouter({
        routes: [
            { path: "/user/:id", component: User }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>



<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo11">foo</router-link>
            <router-link to="/user/bar11">bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
    const User = {
        template: `<div>{{$route.params.id}}</div>`,
        watch: {
            "$route": "doSomething"
        },
        methods: {
            doSomething: function() {
                alert(this.$route.params.id)
            }
        }
    }
    const router = new VueRouter({
        routes: [
            { path: "/user/:id", component: User }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

 

共有 人打赏支持
粉丝 2
博文 155
码字总数 58542
×
tianyawhl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: