Vue Router动态路由匹配核心是用冒号:声明路径参数，如/user/:id，匹配/user/123等URL并将值注入$route.params；支持多参数、可选参数（:id?）、正则约束（:id(d+)）、通配符（*）及响应参数变化的监听机制。

Vue Router 的动态路由匹配模式，核心是用路径中的占位符捕获 URL 片段，并把值注入 $route.params 供组件使用。它不是为每个 ID 单独写一条路由，而是用一套规则覆盖所有同类路径。

基础参数匹配

在路径中用冒号 : 开头声明动态段，例如 /user/:id。访问 /user/123 或 /user/abc 都会命中该路由，$route.params.id 分别得到 '123' 和 'abc'。

• 一个路径可含多个参数，如 /user/:username/post/:postId，匹配后 $route.params 是 { username: 'evan', postId: '123' }
• 参数名需语义清晰，避免父子嵌套路由中重名（比如父用 userId，子用 postId）

可选与受限参数

参数可以设为可选，也能限制格式，让匹配更精准。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 加问号 ? 表示可选：路径 /user/:id/:name? 同时匹配 /user/123 和 /user/123/john
• 括号内写正则可校验内容： /user/:id(\d+) 只接受纯数字 ID；注意反斜杠要双写 \d
• 若需区分相似参数（如订单号和商品名），可用不同正则，/:id(\d+) 和 /:name([a-z]+) 能避免冲突

通配与重复段

当路径层级不确定或需要兜底时，通配符非常实用。

立即学习“前端免费学习笔记（深入）”；

• * 匹配零个或多个路径段，常用于 404 页面：{ path: '*', component: NotFound }
• + 要求至少一个段，比如 /:tags+ 匹配 /vue/react，但不匹配 /
• 使用 + 或 * 时，对应参数值是数组而非字符串，跳转时也要传数组：{ name: 'tags', params: { tags: ['vue', 'ts'] } }

响应参数变化

组件会被复用，所以从 /user/1 切到 /user/2 时，created 或 mounted 不会再次触发。

• 监听 $route 对象：watch: { $route(to, from) { /* 根据 to.params.id 加载新数据 */ } }
• 使用导航守卫 beforeRouteUpdate，更适合封装在组件内部做数据更新
• 如果希望组件每次重建，可在 <router-view> 上加 key，比如 :key="$route.fullPath"