Vue Router 动态路由匹配

动态路由匹配

带参数的动态路由匹配

将给定匹配模式的路由(path:'/users/:id')映射到同一个组件(Component:User)。

路径参数

例如有一个User组件，它应该对所有用户进行渲染，但用户ID不同，在Vue Router中，可以在路径中使用一个动态段(以冒号开始)来实现，称之为‘路径参数’。

{
        path: '/users/:id',
        component: Users
}

当一个路由被匹配时，它的params值将在每个组件中以this.$route.params的形式暴露出来(HTML中则是$route.params)。而动态段的key和对应值将被映射到params上，通过this.$route.params.动态段key获取。

响应路由参数的变化

当用户从/users/johnny导航到/users/jolyne时，相同组件实例将被重复使用。两个路由都渲染同个组件，复用则更加高效。但这也意味着组件的生命周期钩子不会再被调用。

对同一组件参数的变化做出响应

可以用watch $route对象上的任意属性：

created() {
    this.$watch(() => this.$route.params,
        (toParams, previousParams) => {
          //对路由变化做出响应
        })
  }

this.$watch(要监视的属性，回调函数)

监视当前路由实例上的任意属性，例如动态段的值发生变化时，会触发回调函数，对路由的变化做出响应。

也可以使用beforeRouteUpdate导航守卫：

const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    //对路由变化做出响应
  }
}

获取params任意属性对应的值：to.params.xxx

捕获所有路由或404 Not found路由

常规参数只匹配url片段间的字符(即/xxx/中间的部分)。如果想匹配自定义路径，可以在路径参数后面的括号中加入正则表达式。

匹配任意路径，可以使用通配符*：path:'*'，通常用于客户端404错误。如果使用了History模式，请确保正确配置了服务器。

当使用通配符路由时，请确保路由顺序正确，即含有通配符的路由应该放在最后。

当使用一个通配符时，$route.params内会自动添加一个名为patchMatch参数，它包含URL通过通配符被匹配的部分：

{
        path: '/user-*',
        name:'User',
        component:User
    }

上面例子中，若路径为/user-admin，则this.$route.params.patchMatch=admin。

高级匹配模式

vue-router使用path-to-regexp作为路径匹配引擎，所以支持很多高级的匹配模式，例如可选的动态路径参数、匹配0个或多个(*)、1个或多个(+)，甚至是自定义正则匹配(例如：'/:username(^\\d)+')。

匹配优先级

有时候，同一路径可以匹配多个路由。此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。