学习笔记：Vue Router 动态路由与参数匹配详解

题目重述

本文主要讲解 Vue Router 中的带参数的动态路由匹配机制，包括：

• 动态参数的定义与使用（如 /users/:id）

• 多参数和自定义正则表达式的高级用法

• 组件如何响应路由参数的变化

• 404 路由捕获与通配符配置

• 参数变化监听方式（组合式 API 和选项式 API）

详解

一、动态路由参数的基本语法

在 Vue Router 中，可以通过在路径中使用冒号 : 来定义动态段（参数）：

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

匹配示例：

• /users/johnny → $route.params.id = 'johnny'

• /users/jolyne → $route.params.id = 'jolyne'

✅ 特点：

• 所有符合该模式的 URL 都会映射到同一个组件。

• 参数值通过 $route.params 访问。

二、多参数路由匹配

可以在一个路径中定义多个动态参数：

{ path: '/users/:username/posts/:postId', component: PostDetail }

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

注意：每个 :参数名 对应一个字段，并自动填充到 route.params 对象中。

三、对参数变化做出反应

由于从 /users/a 到 /users/b 是同一组件复用，组件不会重新创建，因此：

❌ 生命周期钩子（如 created、mounted）不会再次触发

✅ 正确做法是监听 $route 变化：

方法一：使用 watch 监听参数变化（组合式 API）

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

const route = useRoute()

watch(
  () => route.params.id,
  (newId, oldId) => {
    console.log('用户ID已变更:', newId)
    // 执行数据加载等操作
  }
)
</script>

方法二：使用导航守卫 onBeforeRouteUpdate

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

onBeforeRouteUpdate(async (to, from) => {
  userData.value = await fetchUser(to.params.id)
})
</script>

💡 优势：可在守卫中异步获取数据或阻止无效跳转。

四、捕获所有路由（404 处理）

为了处理不存在的页面，可以使用通配符路由：

1. 捕获任意路径

{
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: NotFound
}

• (.*)* 表示匹配任意字符（包括多级路径）

• 匹配结果存于 route.params.pathMatch

示例：

• /not/exist/path → route.params.pathMatch = ['not', 'exist', 'path']

• 或字符串形式："not/exist/path"

2. 自定义正则表达式参数

{
  path: '/user-:afterUser(.*)',
  component: UserGeneric
}

匹配：/user-john, /user-admin-settings 等

五、编程式导航传参（保留结构）

当需要跳转到通配符路由并保持路径结构时：

router.push({
  name: 'NotFound',
  params: { pathMatch: route.path.substring(1).split('/') },
  query: route.query,
  hash: route.hash
})

⚠️ 注意：substring(1) 避免生成 // 开头的 URL

六、服务器配置提示（History 模式）

        若使用 createWebHistory 模式（无 #），必须确保后端服务器将所有前端路由请求指向 index.html，否则刷新会导致 404。

常见配置：

• Nginx: 添加 try_files $uri $uri/ /index.html;

• Node.js (Express): 使用中间件 fallback 到 index.html

图表示意：动态路由匹配逻辑流程图

总结要点

功能	实现方式	注意事项
动态参数	/users/:id	参数通过 $route.params.id 获取
多参数	/a/:x/b/:y	自动生成对应字段对象
参数监听	watch(route.params) 或 onBeforeRouteUpdate	生命周期钩子不触发！
通配符路由	/:pathMatch(.*)*	用于 404 页面
编程式导航传参	params: { pathMatch: [...] }	防止双斜杠问题
History 模式	createWebHistory()	需服务器支持

知识点

• 动态路由参数：通过 :param 定义，匹配后可通过 $route.params 访问，适用于用户详情等场景。

• 参数变化监听：组件复用时不触发生命周期，需用 watch 或 onBeforeRouteUpdate 响应变化。

• 通配符与正则匹配：使用 (.*)* 实现全路径捕获，用于 404 页面或灵活路由设计。