在 Vue 中，params 和 query 是两种常见的参数传递方式，它们在使用方式、表现形式、灵活性和适用场景上有显著的区别。以下是详细对比：
params（路径参数）
- 用途：
params通常用于动态路由，即路由路径中的一部分是变量。它们用于构建URL的结构部分。 - URL表现：
params直接嵌入到URL的路径中，例如：/user/123中的123就是一个params参数。 - 传递方式：通过
this.$router.push({ name: 'user', params: { userId: 123 } })或在模板中使用router-link的to属性传递。 - 限制：
params只能传递路径参数，如果URL需要传递多个相同名称的参数，params不适用。 - 刷新行为：改变
params会导致页面刷新。 - 编码：Vue Router会自动对
params进行编码和解码。
query（查询参数）
- 用途：
query用于URL的查询字符串部分，用于传递非路径参数，如搜索条件、分页信息等。 - URL表现：
query出现在URL的?后面，例如：/search?q=vue中的q=vue就是一个query参数。 - 传递方式：通过
this.$router.push({ path: '/search', query: { q: 'vue' } })或在模板中使用router-link的to属性传递。 - 灵活性：
query可以传递多个相同名称的参数，例如：/search?q=vue&q=javascript。 - 刷新行为：改变
query不会导致页面刷新，它们更像是URL的附加信息。 - 编码：Vue Router不会自动对
query进行编码，需要手动处理特殊字符。
params 与 query 的对比总结
| 特性 | params | query |
|---|---|---|
| 绑定路径 | 动态绑定到路径，占位符必须预定义 | 不绑定路径，可以附加到任意 URL 后 |
| URL 表现形式 | /user/123 | /user?id=123 |
| 刷新后是否丢失 | 不会丢失 | 不会丢失 |
| 适用场景 | 固定层级的路径参数（语义化场景） | 动态参数、可选参数（筛选、分页） |
| 灵活性 | 较低（需按路径定义） | 较高（无需路径限制） |
注意事项
-
路径必须包含动态占位符：
- 如果路由路径中没有动态占位符（如
:id），params传参将不起作用。 - 解决方法： 确保路由配置中定义了
:paramName。
- 如果路由路径中没有动态占位符（如
-
URL 中未体现的 params 会丢失：
-
如果通过
params传递参数但未在路径中体现（如/user而不是/user/:id），刷新页面后参数会丢失。 -
解决方法：
- 将参数绑定到路径中。
- 或者改用
query参数，适合动态或可选参数。
-
-
params 适用于固定层级的参数：
- 如果参数是路径的核心组成部分（如用户 ID、文章 ID），用
params。 - 如果参数是动态的或可选的（如筛选条件、分页），用
query更合适。
- 如果参数是路径的核心组成部分（如用户 ID、文章 ID），用
