Vue Router 路由管理怎么使用编程式导航传递 query 与 params-Vue.js-PHP中文网

vue router编程式导航需区分query和params：query用于可选筛选条件，url显示且刷新不丢；params用于标识性资源路径，需路由预定义动态段，刷新依赖正确配置。

vue router 路由管理怎么使用编程式导航传递 query 与 params

Vue Router 的编程式导航主要通过 this.$router.push() 实现，传参核心在于区分 query 和 params 的使用场景与写法——前者适合可选筛选条件，后者适合标识性资源路径；传参方式不对，参数会丢失或根本拿不到。

query 参数以 ?key=value 形式拼在 URL 后，适用于搜索关键词、分页页码、排序字段等非核心但需保留的状态。

跳转时可直接用 path 或 name，配合 query 对象：
this.$router.push({ path: '/search', query: { keyword: 'vue', page: 2 } })
或
this.$router.push({ name: 'Search', query: { keyword: 'vue', page: 2 } })
目标页用 this.$route.query 接收：
const keyword = this.$route.query.keyword
const page = Number(this.$route.query.page) || 1
刷新页面后参数仍在，URL 显示为 /search?keyword=vue&page=2，便于分享和书签保存

params 是动态路径段（如 /user/123 中的 123），代表资源唯一标识，必须在路由配置中用 :id 这类占位符定义。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

只能配合 name 使用，不能只写 path + params（否则 params 被忽略）：
this.$router.push({ name: 'UserDetail', params: { id: 123 } })
对应路由配置必须含动态段：
{ path: '/user/:id', name: 'UserDetail', component: UserDetail }
目标页用 this.$route.params 获取：
const userId = this.$route.params.id
刷新页面时，params 不会自动恢复——因为 URL 路径里虽有 /user/123，但 Vue Router 需要路由规则匹配才能解析出 params；若路由配置正确，刷新后仍能拿到；但若误配（比如漏了 :id），就会拿不到

实际开发中容易混淆或出错的地方：

params 搭配 path 写法无效：
this.$router.push({ path: '/user', params: { id: 123 } }) → 实际跳转是 /user，id 丢了。必须改用 name 或手写完整 path：
this.$router.push({ path: `/user/${123}` })
params 刷新失效？先检查路由是否声明了动态段：
如果路由写成 { path: '/user', name: 'User' }，却用 params 传值，跳转后 $route.params 为空——因为没定义 :id，Router 不知道该从哪截取
query 和 params 混用没问题：
this.$router.push({ name: 'Post', params: { id: 456 }, query: { from: 'list', tab: 'comments' } })
生成 URL 如 /post/456?from=list&tab=comments，两边参数各自独立获取即可

无论用哪种方式传，接收逻辑一致：

query：import { useRoute } from 'vue-router'; const route = useRoute(); console.log(route.query.id);
params：console.log(route.params.id);
注意：params 在 setup() 中首次执行时可能为空（尤其 SSR 或服务端跳转），建议加空值判断或用 watch 监听 route.params 变化

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！