Vue中动态获取路由参数需配合配置、取值与使用：params用于必需路径参数（如/user/:id），须用name跳转并在$route.params中读取；query用于可选筛选参数（如/search?q=vue），通过$route.query获取；同组件内参数变化需监听$route或使用导航守卫。
在 Vue 中动态获取路由参数，主要靠
$route.params
和
$route.query
，它们分别对应 URL 中的动态路径段和查询字符串。关键不是“怎么传”，而是“怎么配 + 怎么取 + 怎么用”，下面直接说清楚。
params 传参：适合 ID、名称等必需路径参数
params 必须配合动态路由定义使用，比如
或
。它不会出现在 URL 查询栏里，而是嵌在路径中，刷新页面也不会丢失（因为是路径的一部分）。
在 router 配置中定义：
{ path: '/user/:id', component: User }
编程式导航跳转：
this.$router.push({ name: 'User', params: { id: 123 } })
在组件中取值：
this.$route.params.id
（注意是
$route
，不是 $router）
⚠️ 注意：如果用 path 跳转（非 name），
params 会失效
，必须用 name 或完整 path + params 同时传
query 传参：适合可选、筛选类参数（类似传统 GET）
query 参数以
形式拼在 URL 后，不参与路由匹配，因此更灵活，也支持浏览器前进/后退保留状态。
跳转时传：
this.$router.push({ path: '/search', query: { q: 'vue', page: 2 } })
URL 显示为：
/search?q=vue&page=2
组件中取值：
this.$route.query.q
、
this.$route.query.page
支持对象、数组甚至嵌套（会被自动序列化），例如
{ tags: ['vue', 'router'] }
→
?tags[]=vue&tags[]=router
监听参数变化，避免页面不刷新
用 params 或 query 跳转到**同一个路由组件**时（比如从 /user/1 → /user/2），组件实例会被复用，
不会触发 created/mounted
，所以参数变了但视图没更新。
Vue-router参考手册
Vue-router参考手册下载
下载
立即学习
“
前端免费学习笔记（深入）
”；
方案一：监听
$route
变化（推荐 Vue 2）：
watch: { '$route': 'fetchData' }
，然后在
fetchData()
里读取
this.$route.params.id
方案二：用
beforeRouteUpdate
导航守卫（Vue 2）或
onBeforeRouteUpdate
（Vue 3 Composition API）
方案三：给
加
:key="$route.fullPath"
强制重渲染（简单但略重）
补充：params 和 query 混用没问题
比如路径是
/order/:orderId
，同时带
?tab=detail&from=notification
，那你可以同时访问：
this.$route.params.orderId
和
this.$route.query.tab
params 是路径级标识（通常唯一、不可省略）
query 是附加行为控制（可选、可删、可多个）
别把敏感信息放 query 里（会留痕、上日志），ID 类建议用 params；搜索条件、分页、标签过滤用 query 更合适
/user/:id/post/:slug?key=value&sort=asc