动态路由匹配

本节目标：理解“动态路由匹配”的核心思路，并能把它用于实际开发或面试表达。

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 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 都将映射到相同的路由。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的
ID：
const User = {
    template: '<div>User {{ $route.params.id }}</div>'
}
**多段路径参数**
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

| |

**模式**

**匹配路径**

**$route.params**

/user/:username

/user/evan

{ username: 'evan' }

/user/:username/post/:post_id

/user/evan/post/123

{ username: 'evan', post_id: '123' }

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等。你可以查看 API 文档的详细说明。

响应路由参数的变化 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
或者使用 2.2 中引入的 beforeRouteUpdate [导航守卫](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)：
const User = {
    template: '...',
    watch: {
        $route(to, from) {
            // 对路由变化作出响应...
        }
    }
}

在vue3中，应该如下操作：
要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：
const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
      }
    )
  },
}

或者，使用 beforeRouteUpdate 导航守卫，它也可以取消导航： const User = { template: '...', async beforeRouteUpdate(to, from) { // 对路由变化做出响应... this.userData = await fetchUser(to.params.id) }, }

捕获所有路由或 404 Not found 路由常规参数只匹配 url 片段之间的字符，用 / 分隔。如果我们想匹配任意路径，我们可以使用自定义的路径参数正则表达式，在路径参数后面的括号中加入正则表达式 : js const routes = [ // 将匹配所有内容并将其放在 $route.params.pathMatch 下 { path: '/:pathMatch(.)', name: 'NotFound', component: NotFound }, // 将匹配以 /user- 开头的所有内容，并将其放在 $route.params.afterUser 下 { path: '/user-:afterUser(.*)', component: UserGeneric }, ]

在这个特定的场景中，我们在括号之间使用了自定义正则表达式，并将pathMatch 参数标记为可选可重复。这样做是为了让我们在需要的时候，可以通过将 path 拆分成一个数组，直接导航到路由： this.$router.push({ name: 'NotFound', // 保留当前路径并删除第一个字符，以避免目标 URL 以 // 开头。 params: { pathMatch: this.$route.path.substring(1).split('/') }, // 保留现有的查询和 hash 值，如果有的话 query: this.$route.query, hash: this.$route.hash, })

更多内容请参见重复参数部分。

如果你正在使用历史模式，请务必按照说明正确配置你的服务器。

高级匹配模式 Vue Router 使用自己的路径匹配语法，其灵感来自于 express，因此它支持许多高级匹配模式，如可选的参数，零或多个 / 一个或多个，甚至自定义的正则匹配规则。请查看高级匹配文档来探索它们。

动态路由匹配 ​

动态路由匹配