Vue 路由传参 params 和 query 怎么选？专家解析两者的本质区别

选 params 还是 query，关键看参数是否为“路由身份的一部分”：决定具体资源用 params，影响展示用 query；params 是路径身份证，需路由预定义，如 /user/:id；query 是备注栏，灵活可选，如 /user?id=123。

判断该选 params 还是 query，要看参数属于“路由身份的一部分”，用于确定正在访问的具体资源，还是仅属于影响页面展示的“附加操作指令”。属于前一种情况就用 params，属于后一种情况则用 query。

params 如同路径的“身份证”，缺少它就无法定位对象

使用 params 前必须在路由配置中预先声明，例如 /user/:id 中的 :id。它是 URL 路径主体的直接组成部分，作用类似地址门牌号，不能省略。

• URL 会显示为 /user/123，形式简洁且语义明确，也符合 RESTful 风格
• 执行跳转时必须采用 name + params 这种方式，不能使用 path，否则参数不会生效
• 刷新页面不丢参数——只要路由规则写对了，:id 已定义，/user/123 刷新后依然能取到 this.$route.params.id
• 它适合传递商品 ID、用户 ID、文章 slug 等主键类标识，这些核心字段一旦更换，就会进入不同页面

query 就像 URL 的“备注栏”，并非必需，却十分灵活

query 参数无需依赖路由定义，可以添加在任何路径之后，例如 /user?id=123&tab=profile&page=2。从本质上看，它属于查询字符串，与 HTTP GET 请求的逻辑相同。

• URL 会显示为 ?key=value&key2=value2，参数以明文呈现，可以手动修改，也便于收藏和分享
• 跳转时可以使用 path 或 name，只需配合 query 对象即可，使用方式更自由
• 刷新后参数不会丢失，并且天然兼容浏览器前进/后退、书签保存，对 SEO 也很友好，尤其适用于分页和筛选
• 它适合携带非关键、可选且经常变化的控制信息，例如搜索关键词、分页页码、排序字段、标签筛选和弹窗开关

不要混用或生搬硬套，可参考一个典型组合

在真实项目里，两种参数经常同时出现，但各自承担不同职责：

立即学习“前端免费学习笔记（深入）”；

• 详情页的主路径使用 params：/article/:slug（slug 是文章的唯一标识，不能缺少）
• 同时用 query 控制展示：/article/how-to-vue?from=search&highlight=router（来源与高亮词不会改变页面身份，只用于增强体验）
• 列表页本身用普通路径（如 /articles），筛选条件全走 query：/articles?category=vue&status=published&page=3

牢记这三点，避开常见误区

✘ 错误认知：“params 刷新会丢” —— 实际只要路由已经写入 path: '/user/:id'，刷新 /user/123 后 params.id 仍然一定存在。参数丢失通常是因为用 path + params 跳转，或者路由中根本没有定义 :id。

✘ 错误写法：为 params 使用 query 风格的跳转 —— { path: '/user', params: { id: 123 } } 这种写法不会生效，params 必须配合 name 使用。

✘ 滥用 query 替代 params —— 比如把 /product?id=888 若把它作为详情页主入口，会造成 URL 不规范、无法缓存，并且不利于服务端渲染识别。