query适用于灵活可选的筛选条件等，拼在URL末尾；params适用于必填资源ID，需路由预设动态段且仅支持name跳转。
Vue Router 的 query 和 params 是两种最常用、最直接的页面间通信方式，适用于简单数据传递，不依赖状态管理。它们本质是把数据“挂”在路由上，目标组件通过读取当前路由对象即可拿到参数。
query 传参：URL 后缀式，灵活可选
query 参数会拼在 URL 末尾（如 /user?id=123&tab=info），类似 HTTP GET 请求。它不要求路由路径中预设占位符，适合传递筛选条件、分页页码、搜索关键词等非必需、可省略的信息。
- 跳转时支持
path或name，例如：this.$router.push({ path: '/list', query: { page: 2, keyword: 'vue' } }) - 接收时统一用
this.$route.query（Vue 2）或useRoute().query（Vue 3 Composition API）
比如console.log(this.$route.query.page)输出2 - 刷新页面后参数保留，因为完整 URL 包含了 query 字段
- 可传多个同名 key（如
ids[]=1&ids[]=2），但需手动解析数组
params 传参：路径嵌入式，强绑定必填
params 参数必须提前在路由配置中定义为动态段（如 /user/:id），参数值直接成为路径一部分（如 /user/123）。它更适合标识性、不可省略的资源 ID 类数据，语义清晰且利于 SEO 和缓存。
- 只能配合
name使用（不能用path+params，否则参数丢失）
例如：this.$router.push({ name: 'UserDetail', params: { id: 123 } }) - 路由配置中必须声明动态参数：
{ path: '/user/:id', name: 'UserDetail', component: User } - 接收时用
this.$route.params.id（Vue 2）或useRoute().params.id（Vue 3） - 刷新页面后参数仍在，因为路径本身携带了该信息
- 若未匹配到对应路由规则，params 会被静默忽略，容易“传了却收不到”
避免常见坑：params 失效的典型场景
params 看似简洁，但实际开发中容易出错。以下情况会导致参数丢失：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 用
path跳转却试图传params：this.$router.push({ path: '/user', params: { id: 123 } })→params不生效 - 路由未配置
name，仅靠path匹配，无法触发命名路由的 params 解析 - 路由路径写错，比如配置的是
/user/:userId，却传{ id: 123 }→ 键名不匹配，params.userId才有值 - 使用
replace或redirect时未显式携带 params，中间跳转会清空
推荐搭配 props 解耦组件逻辑
直接在组件里访问 this.$route 会让组件和路由强耦合。更健壮的做法是开启 props: true，让 Vue Router 自动把 params 或 query 注入为组件 prop：
- 路由配置中加
props: true：{ path: '/user/:id', component: User, props: true } - 组件内直接声明
props: ['id']，无需再写this.$route.params.id - 也可用函数模式做转换，比如把
query.q映射为searchTermprop
不复杂但容易忽略：query 更安全通用，params 更语义化但约束多。日常开发中，ID 类必填参数用 params，其余筛选/状态类参数优先用 query。
