Vue动态路由需三者匹配：路由定义含:id占位符、跳转用name+params、组件中通过$route.params取值并监听变化；query参数适用于非核心场景。
Vue 动态路由处理带参跳转，核心在于「路由定义 + 跳转方式 + 参数接收」三者匹配。关键不是参数怎么传，而是路径结构、跳转写法、取值方式必须一致，否则 this.$route.params 会为空或报错。
一、动态路由必须提前在 routes 中声明参数占位符
不能直接跳转 /user/123 就生效，必须先配置带 : 的路径：
-
正确示例：
{ path: '/user/:id', name: 'User', component: User } -
错误写法：只写
{ path: '/user', component: User }，再用push('/user/123')—— 此时$route.params读不到id - 多个参数支持连写：
path: '/user/:id/post/:pid'，对应$route.params.id和$route.params.pid
二、跳转时必须用命名路由（name）+ params，不能混用 path
使用 params 传参时，push 必须基于命名路由，否则参数丢失：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
-
✅ 推荐（安全）：
this.$router.push({ name: 'User', params: { id: 1001 } }) -
❌ 错误（无效）：
this.$router.push({ path: '/user', params: { id: 1001 } })——params在path模式下被忽略 -
⚠️ 注意：如果用
path字符串跳转（如push('/user/1001')），前提是路径完全匹配已声明的动态格式，且不依赖params对象
三、目标组件中通过 $route.params 取值，并监听变化
动态路由复用组件时，mounted 不会重复触发，所以不能只在挂载时读参数：
立即学习“前端免费学习笔记（深入）”；
- 基础读取：
this.$route.params.id（首次进入可用） - 响应后续变化（如从 /user/1 → /user/2）：
watch 方式：watch: { '$route.params.id': 'fetchUserData' }
守卫方式：beforeRouteUpdate(to, from, next) { console.log(to.params.id); next(); }
四、补充：query 参数更灵活，但语义不同
如果参数是非核心路径标识（如分页、筛选、来源标记），建议用 query：
- 跳转：
this.$router.push({ path: '/user', query: { id: 1001, tab: 'info' } })→ URL 显示为/user?id=1001&tab=info - 取值：
this.$route.query.id，无需路由提前声明，也不影响路由匹配逻辑 - 适用场景：搜索条件、页面状态、临时上下文，不参与权限或菜单渲染逻辑
