const User = { template: '<div>User{{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] })
//多段『路径参数』,对应的值都会设置到 $route.params 中 /user/:username/post/:post_id
//路由参数变化,组件复用时,可以用watch处理 const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } }
或者使用beforeRouteUpdate const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } }
同一个路径可以匹配多个路由,谁先定义的,谁的优先级就最高。