前端路由页面，params 和 query 的选择

在前端路由中，params 和 query 是两种常见的参数传递方式，具体选择取决于场景需求。以下是两者的对比和适用建议：

1. 路径参数（params）

• 形式 ：直接嵌入在 URL 路径中，例如 /user/:id。

• 特点：

  • 强关联性 ：参数是路由路径的一部分，适合与页面内容强相关的固定参数（如用户 ID、文章 ID）。
  • SEO 友好：路径结构清晰，搜索引擎更易识别。
  • 刷新保留：页面刷新时参数不会丢失。
  • 路由配置依赖 ：需要在路由定义中显式声明参数（如 path: '/user/:id'）。

• 适用场景：

  • 用户详情页（如 /user/123）。
  • 商品详情页（如 /product/456）。

2. 查询参数（query）

• 形式 ：通过 URL 的查询字符串传递，例如 /search?keyword=apple&page=2。

• 特点：

  • 灵活性高 ：参数不固定，可动态添加或删除，适合可选参数 或组合参数（如搜索条件、分页信息）。
  • 无路由配置限制 ：无需修改路由定义，直接通过 location.search 获取。
  • URL 长度可能较长：参数过多时 URL 会变得冗长。
  • 刷新保留：页面刷新时参数也会保留。

• 适用场景：

  • 搜索结果页（如 /search?keyword=react）。
  • 分页（如 /posts?page=2）。
  • 携带临时信息（如跳转来源 ?from=home）。

3. 对比总结

场景	推荐方案	原因
固定参数（如 ID）	params	路径简洁，SEO 友好。
可选参数或组合参数	query	无需修改路由配置，参数灵活。
需要刷新保留参数	两者均可	两者在刷新时都会保留，但 params 更适合强关联的内容。
需要隐藏参数（如 token）	不推荐两者	敏感信息应通过 HTTP 请求头或状态管理（如 Redux）传递，避免暴露在 URL。

4. 实际开发建议

• 优先考虑 params：如果参数是页面内容的核心标识（如用户 ID），用 params 能提升用户体验和 SEO。

• 多用 query 传递临时参数：如分页、搜索条件等动态参数，避免污染路由配置。

• 结合使用 ：某些场景下可以混合使用，例如 /user/123/posts?page=2。

最终选择需根据具体业务需求权衡，确保 URL 清晰且符合用户预期。