Vue Router--动态路由匹配

1.带参数的动态路由匹配

很多时候，我们需要将给定的匹配模式的路由映射到同一个组件。

const routes = [
  // 动态段以冒号开始
  { path: '/users/:id', component: User },
]

例如/users/zwl和/users/zwf 这样的的URL都会映射到同一个路由。当一个路由被匹配时，它的params的值将在每个组件中通过this.$route.params的形式暴露出来。它也可以匹配多个参数

/users/:username/posts/:postId

/users/eduardo/posts/123

{ username: 'eduardo', postId: '123' }

2.响应路由参数的变化

使用带参数的路由时需要注意的是，当用户从/users/zwl导航/users/zwf 时，相同的组件实例将被复用。因为连哥哥路由组件都渲染同个组件，比起销毁再创建，复用显得更高效，不过这意味这组件的生命周期钩子不会被调用。可以使用watch，beforeRouteUpdate