动态路由匹配

「爱情、让人受尽委屈。」 2024-04-18 08:23 48阅读 0赞

更多内容:[https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html][https_router.vuejs.org_zh-cn_essentials_dynamic-matching.html]

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 `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>'
    }

你可以看看这个[在线例子][Link 1]

。

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 `$route.params` 中。例如：

<table> 
 <thead> 
  <tr> 
   <th>模式</th> 
   <th>匹配路径</th> 
   <th>$route.params</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/user/:username</td> 
   <td>/user/evan</td> 
   <td><code>{ username: 'evan' }</code></td> 
  </tr> 
  <tr> 
   <td>/user/:username/post/:post_id</td> 
   <td>/user/evan/post/123</td> 
   <td><code>{ username: 'evan', post_id: '123' }</code></td> 
  </tr> 
 </tbody> 
</table>

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

## [\#][Link 2] 响应路由参数的变化 ##

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

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

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

或者使用 2.2 中引入的 `beforeRouteUpdate` [导航守卫][Link 3]：

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

## [\#][Link 4] 捕获所有路由或 404 Not found 路由 ##

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

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

当使用*通配符*路由时，请确保路由的顺序是正确的，也就是说含有*通配符*的路由应该放在最后。路由 `{ path: '*' }` 通常用于客户端 404 错误。如果你使用了*History 模式*，请确保[正确配置你的服务器][Link 5]。

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

// 给出一个路由 { path: '/user-*' }
    this.$router.push('/user-admin')
    this.$route.params.pathMatch // 'admin'
    // 给出一个路由 { path: '*' }
    this.$router.push('/non-existing')
    this.$route.params.pathMatch // '/non-existing'

## [\#][Link 6] 高级匹配模式 ##

`vue-router` 使用 [path-to-regexp][]

作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的 [文档][Link 7][ ][Link 7] 学习高阶的路径匹配，还有 [这个例子 ][Link 8][ ][Link 8]

展示 `vue-router` 怎么使用这类匹配。

## [\#][Link 9] 匹配优先级 ##

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

[https_router.vuejs.org_zh-cn_essentials_dynamic-matching.html]: https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html
[Link 1]: https://jsfiddle.net/yyx990803/4xfa2f19/
[API]: https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1
[Link 2]: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96
[Link 3]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
[Link 4]: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-not-found-%E8%B7%AF%E7%94%B1
[Link 5]: https://router.vuejs.org/zh/guide/essentials/history-mode.html
[Link 6]: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E9%AB%98%E7%BA%A7%E5%8C%B9%E9%85%8D%E6%A8%A1%E5%BC%8F
[path-to-regexp]: https://github.com/pillarjs/path-to-regexp
[Link 7]: https://github.com/pillarjs/path-to-regexp#parameters
[Link 8]: https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js
[Link 9]: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%8C%B9%E9%85%8D%E4%BC%98%E5%85%88%E7%BA%A7