vueRouter-动态路由匹配 原
我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件，例如，我们有一个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>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/09/12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读