Vue Router动态路由匹配

1. 背景

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件

n 个url地址，映射到通过组件

2. 动态路径参数（冒号开头）

我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
  template: '<div>User</div>'
}

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

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

2.1 获取路径参数（$route.params）

一个“路径参数”使用冒号 : 标记。

/user/:id

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

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

2.2 获取URL查询参数($route.query)

例如

/user?id=zsz

获取参数

$route.query.id

2.3 获取hash值（$route.hash）

用得偏少

3. 响应（监听）路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。

不过，这也意味着组件的生命周期钩子不会再被调用！！！。

3.1 方案1：watch (监测变化）

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

3.2 方案2：beforeRouteUpdate 导航守卫

const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

4. 匹配任意路径

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

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

参考文章

Vue官方文档