Vue-router动态路由配置
例如我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用『动态路径参数』(dynamic segment)来达到这个效果:
const User = { template: 'User' } const router = new VueRouter({ routes: [ 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] }) 现在呢,像 /user/foo 和 /user/bar 都将映射到相同的路由。 一个『路径参数』使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。于是,我们可以更新 User 的模板,输出当前用户的 ID: const User = { template: 'User {{ $route.params.id }}' }
当使用路由参数时,两个路由都复用同个组件,比起销毁再创建,复用则显得更加高效。也意味着组件的生命周期钩子不会再被调用。 想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:
const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } }
或者使用 2.2 中引入的 beforeRouteUpdate 守卫:
const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } }