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

效果

查看效果

当匹配到路由时,参数值会被设置到 this.$route.params ，可以在每个组件中使用,于是，我们可以更新 User 的模板，输出当前用,户的 ID：

<template>
  <div>
      <h3>⽤户⻚⾯{{$route.params.id}}</h3>
  </div>
</template>

响应路由参数的变化

提醒⼀下，当使用路由参数时，例如从/user/1导航到 /user/2， 原来的组件实例会被复用。
因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。
不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地watch (监测变化) $route 对象：

// 使⽤watch(监测变化) $route对象
watch: {
    $route(to, from) {
    console.log(to.params.id);
    }
}, 
// 或者使⽤导航守卫
beforeRouteUpdate(to,from,next){
//查看路由的变化
//⼀定要调⽤next,不然就会阻塞路由的变化
    next();
}