4、动态路由匹配：:id参数、通配符*、正则表达式匹配

动态路由，说白了就是让 URL 里的某一段「活起来」。

你想想看，一个博客系统，文章详情页的 URL 通常是 /article/123、/article/456。如果每篇文章都写一个静态路由，那得写到猴年马月去？

Vue Router 提供了三种动态匹配方式：:id 参数、通配符 *、以及正则表达式。我个人习惯把它们叫做「三兄弟」，今天咱们就把它们彻底搞明白。

4.1 基础动态参数：:id

这是最常用的一种。在路由路径里用冒号 : 声明一个参数名，Vue Router 会自动把 URL 中对应位置的值提取出来。

// 路由配置
const routes = [
  { path: '/user/:id', component: UserDetail }
]

// 组件内获取参数
this.$route.params.id   // 输出：123

我在项目中遇到过不少新手，以为 :id 只能叫 id。其实你可以随便命名，比如 :slug、:username，甚至 :articleTitle。只要保持语义清晰就行。

多个参数可以串联使用：

{ path: '/user/:userId/post/:postId', component: UserPost }

访问 /user/5/post/99 时，this.$route.params 会得到：

{
  userId: '5',
  postId: '99'
}

嗯，这里要注意：参数值默认是字符串。如果你需要数字类型，记得手动转换。

4.2 通配符 *：匹配任意路径

通配符 * 就像一把万能钥匙。它能匹配任意长度的路径片段。

最常见的用法是做 404 页面：

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

我曾经在一个老项目里看到有人用 * 做文章详情页的路由，结果导致所有未匹配的路径都跑到了文章页。那场面，简直是一场灾难。

通配符的另一个用途是捕获嵌套路径：

{ path: '/files/*', component: FileManager }

访问 /files/images/2024/photo.jpg 时，$route.params.pathMatch 会得到 images/2024/photo.jpg。这个特性在做文件管理器时特别有用。

4.3 正则表达式匹配：精准控制

有时候，你希望参数只匹配特定格式。比如用户 ID 必须是数字，文章 slug 只能包含小写字母和连字符。

这时候就该正则表达式上场了。Vue Router 支持在参数后面加括号写正则：

// 只匹配数字 ID
{ path: '/user/:id(\\d+)', component: UserDetail }

// 只匹配 6 位数字
{ path: '/code/:code(\\d{6})', component: CodePage }

// 匹配小写字母和连字符
{ path: '/article/:slug([a-z-]+)', component: ArticleDetail }

我记得有一次做电商项目，商品 SKU 的格式是 ABC-12345。用正则 :sku([A-Z]{3}-\\d{5}) 完美解决了匹配问题，还顺便做了前端校验。

正则表达式在 Vue Router 里需要转义反斜杠。比如 \d 要写成 \\d。这个细节坑过不少人，包括我自己。

4.4 三种方式的对比

匹配方式	语法	适用场景	匹配示例
:id 参数	:paramName	通用参数匹配，如用户ID、文章ID	/user/123 → params.id = '123'
通配符 *	* 或 :pathMatch(.*)*	404页面、文件路径、任意深度匹配	/files/a/b/c → pathMatch = 'a/b/c'
正则表达式	:param(正则)	需要格式校验的参数，如纯数字、固定长度	/code/123456 → 匹配；/code/abc → 不匹配

4.5 实战中的避坑指南

我曾经在一个大型后台管理系统里犯过一个低级错误：把 :id 和 * 混用，导致路由匹配混乱。后来总结了几条铁律：

1. 参数名不要重复：同一个路由里，:id 只能出现一次。否则后面的会覆盖前面的。
2. 通配符放最后：这是铁律，没有例外。
3. 正则要测试：写完后用在线工具验证一下，别直接上线。
4. 注意参数变化：当 :id 从 1 变成 2 时，组件默认会复用。需要用 watch 或 beforeRouteUpdate 来响应变化。

最后说一句：动态路由是 Vue Router 的精髓之一。掌握了 :id、* 和正则，你就能应对 90% 以上的路由场景。剩下的 10%，靠组合和嵌套来解决。