在前端路由开发中，动态路由与路由参数是实现页面间数据传递、构建灵活页面结构的核心技术。其中，params和query是两种最常用的路由参数传递方式，不少开发者在实际使用中容易混淆二者的用法与适用场景。本文将从概念定义、核心区别、实战用法三个维度，带你彻底搞懂params与query的“前世今生”，轻松应对前端路由参数传递需求。
一、先搞懂：动态路由与路由参数的基础认知
在正式对比params与query之前，我们先明确两个基础概念，避免后续理解偏差。
所谓动态路由，简单来说就是路由规则中包含“可变部分”，通过这部分可变内容匹配不同的页面组件，实现“一个路由模板对应多个页面实例”的效果。比如常见的“商品详情页”，不同商品对应不同的详情页，此时就可以用动态路由定义为/goods/:id，其中:id就是动态路由的可变部分，也就是我们所说的“路由参数”。
而路由参数，就是通过路由传递的数据，用于在不同页面间共享信息（比如商品ID、用户ID、筛选条件等）。params和query正是承载这些数据的两种不同“载体”，二者在传递方式、显示形式、使用规则上都存在显著差异。
二、核心区别：params与query的5个关键差异点
这部分是本文的核心，我们通过“对比表格+详细说明”的形式，让二者的差异一目了然。
| 对比维度 | params 参数 | query 参数 |
|---|---|---|
| 传递方式 | 通过路由路径的“动态片段”传递，需在路由规则中定义 | 通过URL的“查询字符串”传递，格式为 ?key=value&key2=value2 |
| URL显示 | 参数会融入URL路径中，不显示key，仅显示value（如 /goods/123） | 参数显示在URL的查询字符串中，包含key和value（如 /goods?id=123&name=手机） |
| 路由规则依赖 | 必须在路由规则中预先定义动态片段（如 /goods/:id），否则无法获取 | 无需在路由规则中定义，可直接在跳转时追加 |
| 参数可选性 | 默认必填（若未传递，路由匹配失败，页面无法显示）；可通过 ? 标记为可选（如 /goods/:id?） | 完全可选，可传递任意数量的参数，不影响路由匹配 |
| 页面刷新后 | 参数会保留（因融入URL路径，刷新时路由重新匹配，参数可正常获取） | 参数会保留（查询字符串在刷新时不会丢失，可正常获取） |
补充说明：关于“刷新后参数丢失”的常见误区
很多初学者会误以为“params参数刷新后会丢失”，这其实是错误的认知。只要参数已经融入URL路径中（即路由规则正确定义了动态片段），刷新后params参数就不会丢失。真正会导致params丢失的场景是：未在路由规则中定义动态片段，却通过 params 传递参数（此时参数仅存储在内存中，未同步到URL），这种情况下刷新页面，参数才会丢失。
而query参数因为始终同步在URL的查询字符串中，无论是否定义路由规则，刷新后都不会丢失，这一点是明确的。
三、实战用法：以Vue Router为例（React Router逻辑类似）
理论讲完，我们结合实际代码示例，看看params和query在项目中如何使用。这里以Vue Router 4.x为例，React Router的用法逻辑一致，仅API存在差异（如React Router用 useParams、useSearchParams 替代）。
1. params 参数的使用步骤
步骤1：在路由规则中定义动态片段
// router/index.jsimport{createRouter,createWebHistory}from'vue-router'importGoodsDetailfrom'@/views/GoodsDetail.vue'constroutes=[// 定义动态路由：:id 是动态片段（params参数）{path:'/goods/:id',name:'GoodsDetail',component:GoodsDetail}]constrouter=createRouter({history:createWebHistory(),routes})exportdefaultrouter步骤2：页面跳转时传递params参数
方式1：通过 组件（声明式导航）
<!-- 传递 params 参数：id=123 --> <router-link :to="{ name: 'GoodsDetail', params: { id: 123 } }"> 查看商品123详情 </router-link>方式2：通过 router.push 方法（编程式导航）
// 编程式导航传递 params 参数this.$router.push({name:'GoodsDetail',// 注意：用params必须指定name（不能用path）params:{id:123}})步骤3：在目标页面（GoodsDetail）获取params参数
// Vue3 组合式APIimport{useRoute}from'vue-router'constroute=useRoute()console.log('商品ID：',route.params.id)// 输出：123// Vue2 选项式APIconsole.log('商品ID：',this.$route.params.id)// 输出：1232. query 参数的使用步骤
query参数无需在路由规则中定义，使用更灵活，步骤如下：
步骤1：直接跳转时传递query参数
方式1：通过 组件（声明式导航）
<!-- 传递 query 参数：id=123，name=手机 --> <router-link :to="{ path: '/goods', query: { id: 123, name: '手机' } }"> 查看商品详情 </router-link>方式2：通过 router.push 方法（编程式导航）
// 编程式导航传递 query 参数（可用path或name）this.$router.push({path:'/goods',// 用path也可以传递queryquery:{id:123,name:'手机'}})步骤2：在目标页面获取query参数
// Vue3 组合式APIimport{useRoute}from'vue-router'constroute=useRoute()console.log('商品ID：',route.query.id)// 输出：123console.log('商品名称：',route.query.name)// 输出：手机// Vue2 选项式APIconsole.log('商品ID：',this.$route.query.id)console.log('商品名称：',this.$route.query.name)3. 关键注意点总结
传递params参数时，必须使用name跳转，不能用path（若用path，params参数会被忽略）；
传递query参数时，可使用path或name跳转，两种方式都有效；
params参数默认必填，若需可选，需在路由规则中添加 ?（如 /goods/:id?）；
query参数支持传递多个键值对，且可以传递数组（如 query: { ids: [1,2,3] }，URL会显示为 ?ids=1&ids=2&ids=3）。
四、使用场景推荐：什么时候用params，什么时候用query？
根据二者的特性，我们可以总结出明确的使用场景，避免滥用导致问题：
1. 优先使用 params 的场景
参数是页面的“核心标识”，必须存在才能正常显示页面（如商品ID、用户ID、文章ID等）；
希望URL更简洁、美观，不暴露参数名（如 /user/100 比 /user?id=100 更简洁）；
参数是路由的一部分，需要参与路由匹配（如不同ID对应不同的资源详情）。
2. 优先使用 query 的场景
参数是“可选筛选条件”，不影响页面核心内容展示（如列表页的页码、搜索关键词、排序方式等）；
需要传递多个可选参数，且参数可能动态增减（如筛选页的多条件筛选：价格区间、品牌、销量等）；
希望参数可被用户直接修改（如用户可以手动修改URL中的页码，直接跳转到指定页）；
跨页面传递临时数据，无需融入路由核心匹配规则。
五、常见问题排查：新手容易踩的3个坑
坑1：用path跳转时，params参数丢失
原因：Vue Router规定，path跳转时会忽略params参数。
解决方案：传递params参数时，改用name跳转，或把参数改为query传递。
坑2：params参数刷新后丢失
原因：未在路由规则中定义动态片段，仅通过 params 传递参数（参数未同步到URL）。
解决方案：在路由规则中添加对应的动态片段（如 /goods/:id），确保参数融入URL。
坑3：query参数获取为字符串类型
原因：query参数通过URL传递，默认都是字符串类型，即使传递的是数字，获取时也会转为字符串。
解决方案：在获取参数后，手动转为对应类型（如 Number(route.query.page)）。
六、总结
params和query都是前端路由传递参数的重要方式，核心区别在于“是否融入路由路径”和“是否依赖路由规则定义”：
params是“路由路径的一部分”，适合传递核心标识参数，URL简洁但参数必填（可配置可选）；
query是“URL的查询字符串”，适合传递可选筛选参数，使用灵活但URL会暴露参数名。
掌握二者的区别与适用场景，就能在实际开发中根据需求灵活选择，避免出现参数丢失、路由匹配失败等问题。如果在使用过程中还有其他疑问，欢迎在评论区留言讨论～
