Vue Router 动态 ID 需三步：一是在路由配置中用 path: '/user/:id' 声明命名参数；二是跳转时必须用 name + params（如 { name: 'UserDetail', params: { id: 123 } }）；三是组件内通过 this.$route.params.id 安全读取，推荐使用可选链 ?. 防空。
要让 Vue Router 正确识别并接收动态 ID，关键在三步：定义带占位符的路径、用 name 跳转传 params、组件里从 $route.params 读取。不是写对语法就行，而是每一步都得严丝合缝。
第一步：路由配置中声明动态段
在 router/index.js（或 routes 配置数组）里，把路径写成含 :id 的形式：
{ path: '/user/:id', name: 'UserDetail', component: () => import('@/views/UserDetail.vue') }- 冒号
:开头表示这是命名参数，id是参数名，可自定义（如:slug、:postId） - 路径中只能有一个
:id，不能写成/user/:id/edit后再加另一个:tab—— 多参数需用多个命名段，如/post/:year/:month/:slug
第二步：跳转时必须用 name + params 对象
不能拼字符串路径，也不能只传 path；必须指定 name，并把 ID 放进 params：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- ✅ 正确：
this.$router.push({ name: 'UserDetail', params: { id: 123 } }) - ❌ 错误：
this.$router.push('/user/123')（丢失 params，$route.params为空） - ❌ 错误：
this.$router.push({ path: '/user/123', params: { id: 123 } })（path跳转下params不生效） - ⚠️ 注意：如果路由配置了
name，但跳转时没传对应params.id，导航会静默失败（页面不跳，也不报错）
第三步：组件内安全读取参数值
在目标组件（如 UserDetail.vue）中，通过 this.$route.params.id 获取：
- 直接访问：
mounted() { console.log(this.$route.params.id) } - 推荐加保护：因为首次加载或刷新后，
params可能是空对象，建议判断存在性：const id = this.$route.params?.id || '' - 若 ID 含斜杠、空格、中文等特殊字符，必须提前用
encodeURIComponent()编码，否则路由匹配中断。例如：userId = 'a/b.txt'→ 应传params: { id: encodeURIComponent('a/b.txt') }
补充：URL 中看不到参数？这是正常的
params 是路径的一部分，不是查询字符串。所以 /user/123 看起来“没参数”，但其实 123 就是 :id 的值。它和 query（如 /user/123?tab=profile）互不干扰，可共存。
