动态路由参数通过$route.params获取，需在路由配置中用冒号声明占位符（如/path/:id），Vue 3推荐useRoute()，Vue 2用this.$route.params，编程式导航应使用命名路由+params方式传参。
在 Vue Router 中，动态路由的占位符（比如 /user/:id 中的 :id）对应的数据，是通过 $route.params 对象获取的。只要路由配置正确、URL 匹配成功，参数就会自动解析并挂载到当前路由对象上。
确认路由已正确定义为动态路由
必须在路由配置中使用冒号语法声明占位符，否则不会触发 params 解析：
-
{ path: '/post/:slug', component: Post }✅ 正确，:slug是动态段 -
{ path: '/post/slug', component: Post }❌ 错误，这是静态路径，不会提取参数
在组件中读取 params 的常用方式
推荐根据 Vue 版本选择写法，避免依赖 this 上下文或生命周期时机问题：
-
Vue 3（组合式 API）：用
useRoute()获取响应式路由对象
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.slug) // 比如访问 /post/hello-world → 输出 'hello-world'
-
Vue 2 或选项式 API：直接访问
this.$route.params
data() 初始化时直接读取，因为组件创建时路由可能未就绪；建议在 mounted、created 或 watch: { '$route' } 中使用
编程式导航传参也要匹配动态规则
如果用 router.push() 跳转，要确保传参方式与路由定义一致：
立即学习“前端免费学习笔记（深入）”；
- 路径字符串方式：
router.push('/post/vue-router')→ ✅ 自动解析params.slug - 命名路由 + params 方式：
router.push({ name: 'Post', params: { slug: 'vue-router' } })→ ✅ 推荐，更安全 - 错误写法：
router.push({ path: '/post', query: { slug: 'vue-router' } })→ ❌ 这会走route.query.slug，不是params
常见误区提醒
容易混淆的几个点：
-
params来自路径段（/user/123），query来自 URL 查询字符串（/user?id=123），两者互不影响 - 如果路由有多个占位符（如
/group/:gid/user/:uid），route.params是一个对象：{ gid: '100', uid: '200' } - 占位符名必须完全一致（大小写敏感），
:Id和:id是两个不同参数
