动态路由匹配

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: "/user/:id", component: User },
  ],
});

解读

有一个路由是/user/那么基于它下面的所有的子路由，都会被/:id匹配到，比如/user/news、/user/about等。 有什么用呢？举个例子！比如我们经常去的淘宝网站的产品详情页，我们看小说网站的阅读界面，你会发现，虽然每个页面的地址栏不同，但是页面是一样的，所以，这就是一种匹配策略，即一个路由匹配多个地址，呈现同一个页面，页面根据地址关键参数不同，展示不同的数据内容。

所以，这里介绍的就是简单的动态路由，那么动态地址部分/:id这个值怎么获取到呢？

// 在路由组件里使用
this.$route.params.id
// 这里需要注意的是id名称不是死的，是根据咱们配置路由时取得名字，动态路由可以匹配很多个，比如
path: '/user/:id/:age/:job'
// 那获取得时候就得这样写
this.$route.params.id、this.$route.params.age、this.$route.params.job
// 上面获取得就是咱们配置里写的字段名称，不是固定死的，如果是直接在html中，不加this

监听路由变化

由于动态路由复用的是同一个组件，为了优化性能，所以不会重新加载组件，那么我们需要使用监听或监听路由函数【路由守卫】来获取路由更新的参数

watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
  // or 使用计算属性也可以
computed: {
  id: function(){
    return this.$route.params.id
  }
}
//  使用v2.2 中引入的 beforeRouteUpdate 导航守卫
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }