如何配置路由路径参数？手把手教你利用 params 传递动态 ID 教程-Vue.js-PHP中文网

Vue Router 动态 ID 需三步：一是在路由配置中用 path: '/user/:id' 声明命名参数；二是跳转时必须用 name + params（如 { name: 'UserDetail', params: { id: 123 } }）；三是组件内通过 this.$route.params.id 安全读取，推荐使用可选链 ?. 防空。

如何配置路由路径参数？手把手教你利用 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') }