带参数的动态路由匹配

动态路由的使用

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：

import User from './User.vue'

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：

<template>
  <div>
    <!-- 当前路由可以通过 $route 在模板中访问 -->
    User {{ $route.params.id }}
  </div>
</template>

这里如果我们访问的路径为 /users/123，那么模板中显示的内容为 User 123。

也可以在同一个路由中设置多个路径参数，并且参数之间使用斜杠分隔。例如，如果我们想根据用户名和用户 ID 显示用户信息，我们可以这样设置：

const routes = [{ path: '/users/:id/:name', component: User }]

这样，当访问 /users/123/john 时，User 组件中的模板会显示 User 123 john。

这里有一个表格来表示如何匹配的

匹配模式	匹配路径	route.params
/users/:username	/users/eduardo	{ username: 'eduardo' }
/users/:username/posts/:postId	/users/eduardo/posts/123	{ username: 'eduardo', postId: '123' }

除了route.params之外，我们还可以使用route.query来获取 URL 中的查询参数。例如，如果我们访问 /users/123?sort=desc，那么 User 组件中的模板会显示 User 123，并且可以通过route.query.sort来获取查询参数 sort 的值。

响应路由参数的变化

使用带参数路由时,组件会被复用,同时也意味着,组件的生命周期钩子不会被调用。因此,当路由参数发生变化时,我们需要手动更新组件的状态。比如可以简单的 watch $route 对象上的任意属性 :

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

watch(
  () => route.params.id,
  (newId, oldId) => {
    // 对路由变化做出响应...
  },
)
</script>

或者是用beforeRouteUpdate导航守卫:

<script setup>
  import { onBeforeRouteUpdate } from 'vue-router'
  // ...

  onBeforeRouteUpdate(async (to, from) => {
    // 对路由变化做出响应...
    userData.value = await fetchUser(to.params.id)
  })
</script>

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

;[
  { path: '/user/:id', component: UserDetail }, // 优先匹配
  { path: '/user-:afterUser(.*)', component: UserGeneric },
  { path: '/:pathMatch(.*)*', component: NotFound },
]

• :pathMatch(.*) 会匹配任意路径，但不会匹配以 / 开头的路径。
• :pathMatch(.*)* 会匹配任意路径，包括以 / 开头的路径。
• /:pathMatch(.*) 会匹配任意路径，但不会匹配以 / 开头的路径，并且会捕获所有匹配到的路径。
• /:pathMatch(.*)* 会匹配任意路径，包括以 / 开头的路径，并且会捕获所有匹配到的路径。

在捕获 404 时需要注意优先级的问题,Vue Router 会按照定义的顺序从上到下进行匹配,所以需要将捕获所有路由的规则放在最后。