Vue 动态路由参数怎么拿？教你如何用 params 和 query 传参的教程-Vue.js-PHP中文网

Vue中动态获取路由参数需配合配置、取值与使用：params用于必需路径参数（如/user/:id），须用name跳转并在$route.params中读取；query用于可选筛选参数（如/search?q=vue），通过$route.query获取；同组件内参数变化需监听$route或使用导航守卫。

vue 动态路由参数怎么拿？教你如何用 params 和 query 传参的教程

在 Vue 中动态获取路由参数，主要靠 $route.params 和 $route.query，它们分别对应 URL 中的动态路径段和查询字符串。关键不是“怎么传”，而是“怎么配 + 怎么取 + 怎么用”，下面直接说清楚。

params 传参：适合 ID、名称等必需路径参数

params 必须配合动态路由定义使用，比如 /user/:id 或 /post/:slug。它不会出现在 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 参数以 ?key=value&sort=asc 形式拼在 URL 后，不参与路由匹配，因此更灵活，也支持浏览器前进/后退保留状态。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

跳转时传：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，所以参数变了但视图没更新。

方案一：监听 $route 变化（推荐 Vue 2）：
watch: { '$route': 'fetchData' }，然后在 fetchData() 里读取 this.$route.params.id
方案二：用 beforeRouteUpdate 导航守卫（Vue 2）或 onBeforeRouteUpdate（Vue 3 Composition API）
方案三：给加 :key="$route.fullPath" 强制重渲染（简单但略重）