例如我们有一个 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()
  }
}