面试题：Vue Router 中 params 和 query 有什么区别？

在 Vue Router 中，params 和 query 都是用来在路由跳转时传递参数的，但它们在使用方式、URL 表现形式和适用场景上有明显区别。

1. URL 表现形式不同

• query 参数：
  • 以键值对的形式出现在 URL 的查询字符串中，即 ? 后面。
  • 格式：/path?key1=value1&key2=value2
  • 例如：/user?name=zhangsan&id=123
• params 参数：
  • 是 URL 路径的一部分，需要在路由配置中预先定义占位符。
  • 格式：/path/:paramName
  • 例如：/user/123（其中 123 是 id 参数的值）

2. 路由配置要求不同

• query：
  • 不需要在路由配置中为参数做特殊声明。
  • 任何路由都可以接收 query 参数。
• params：
  • 必须在路由配置中使用 : 定义动态段。
  • 例如：{ path: '/user/:id', name: 'User', component: User }
  • 只有这样配置后，才能通过 params 传递 id 参数。

3. 获取方式不同

• query：
  • 在组件中通过 this.$route.query 访问。
  • 例如：this.$route.query.name 获取 name 的值。
• params：
  • 在组件中通过 this.$route.params 访问。
  • 例如：this.$route.params.id 获取 id 的值。

4. 路由跳转方式差异

• query：
  • 可以使用命名路由或路径进行跳转。
• params：
  • 必须使用命名路由 (name) 才能生效。如果使用 path，params 会被忽略。

5. 刷新页面后参数是否保留

• query：
  • 会保留。因为参数在 URL 中可见，刷新页面后依然存在。
• params：
  • 会保留。因为参数是 URL 路径的一部分，刷新后依然存在。
  • 注意：这里与一些说法不同，params 参数在刷新后是保留的，因为它构成了实际的 URL。容易混淆的点在于，如果路由配置为 /user/:id，访问 /user/123，刷新后 this.$route.params.id 依然是 123。

6. 适用场景

• query：
  • 适合传递可选的、非关键的参数，如分页信息 (page=1, size=10)、搜索关键词 (keyword=vue)、筛选条件等。
  • 参数对 URL 的“结构”影响小，易于分享和书签。
• params：
  • 适合传递必需的、构成资源标识的参数，如用户 ID (/user/123)、文章 ID (/article/456)。
  • 体现了 RESTful 风格，使 URL 更清晰、更具语义。

总结

特性	query	params
URL 位置	查询字符串 (?key=value)	路径的一部分 (/path/value)
路由配置	无需特殊配置	必须定义动态段 (:param)
跳转方式	可用 path 或 name	必须用 name
获取方式	$route.query	$route.params
刷新保留	是	是
典型用途	分页、搜索、筛选	资源 ID、详情页