选 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 友好（尤其分页、筛选）
• 适合传非关键、可选、多变的控制信息：搜索关键词、分页页码、排序字段、标签筛选、弹窗开关等

别混用，也别硬套：一个典型组合用法

真实项目中，两者经常共存，各司其职：

vue-component-analyzer

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

下载

• 详情页主路径用 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 不规范、无法缓存、不利于服务端渲染识别。

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