Vue Router 用 params 传参需路径占位、命名路由、params 对象三者缺一不可；必须用 name+params 跳转，不可用 path；组件中通过 this.$route.params 获取，推荐配合 props: true 解耦。
Vue Router 中用 params 传动态参数，核心是“路径占位 + 命名路由 + params 对象”，三者缺一不可。直接用 path 字符串跳转会丢失 params，这是最常见的踩坑点。
必须配置带参数的动态路由
在 router/index.js（或 routes 配置）中，路径需明确声明参数占位符，并建议配 name：
{ path: '/user/:id', name: 'UserProfile', component: UserProfile }-
{ path: '/post/:postId/:slug?', name: 'PostDetail', component: PostDetail }（支持可选参数）
必须用命名路由跳转（不能用 path）
调用 this.$router.push 时，一定要用 name + params，否则 params 不生效：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 正确：
this.$router.push({ name: 'UserProfile', params: { id: 123 } })→ URL 变为/user/123 - ❌ 错误：
this.$router.push({ path: '/user/123', params: { id: 123 } })→params被忽略 - ⚠️ 注意：若同时传
query，可共存：{ name: 'UserProfile', params: { id: 123 }, query: { tab: 'info' } }
在目标组件里安全取值
通过 this.$route.params 获取，但要注意参数可能为空或类型不符：
立即学习“前端免费学习笔记（深入）”；
- 推荐在
created或mounted中读取：const id = this.$route.params.id - 若参数是可选的（如
:slug?），需做空值判断：const slug = this.$route.params.slug ?? 'default' - 数字 ID 建议显式转换：
const userId = Number(this.$route.params.id)，避免字符串比较出错
补充：配合 props 解耦更干净
在路由配置中加 props: true，组件就能直接接收 props，无需依赖 $route：
- 路由配置：
{ path: '/user/:id', name: 'UserProfile', component: UserProfile, props: true } - 组件内声明：
props: ['id']，然后直接用this.id - 好处：组件可独立测试、逻辑更清晰、避免
watch $route的副作用
