Experience

Vue Router 中的 params 、query 和 state 对比 ​

query ​

工作原理 ​

  • query 是 URL 查询参数的实现（?key=value）
  • 参数会显示在 URL 中，格式为 ?key=value&key2=value2
  • 数据直接体现在地址栏，便于分享和收藏

使用场景 ​

  • 需要在 URL 中显示参数的场景
  • 通过 this.$route.query 或 route.query 访问
  • 适合筛选、搜索、分页等参数传递

特点 ​

  • 页面刷新后数据保持不变
  • 参数会显示在 URL 中
  • 支持多个参数同时传递
  • 没有路由配置要求，随时可用
  • 适合 SEO 和数据分析

params ​

工作原理 ​

  • params 是 Vue Router 的内置参数系统
  • 它主要用于动态路由匹配（如 /user/:id）
  • 参数值会存储在 Vue Router 的路由对象中

使用场景 ​

  • 需要在路由配置中预先定义（如：path: '/user/:id'）
  • 通过 this.$route.params 或 route.params 访问
  • 适合 URL 路径参数的传递

特点 ​

  • 页面刷新后依然存在（如果是路径参数）
  • 与路由系统紧密集成
  • 当使用 query 方式跳转时，params 实际上不会生效

state ​

工作原理 ​

  • state 是 HTML5 History API 的一部分
  • 它依赖浏览器的 history 状态管理
  • 数据存储在浏览器的历史记录中

使用场景 ​

  • 传递不需要显示在 URL 中的数据
  • 通过 router.currentRoute.value.state 访问
  • 适合传递临时状态数据

特点 ​

  • 页面刷新后数据会丢失
  • 依赖浏览器的 History API
  • 可能需要特定的服务器配置

为什么 state 会白屏而 params 不会？ ​

params 不会白屏的原因 ​

  • 它是 Vue Router 的核心功能
  • 与路由系统深度集成
  • 数据存储在路由实例中
  • 页面刷新时可以从 URL 中恢复

state 会白屏的原因 ​

  • 依赖 HTML5 History API
  • 页面刷新时状态丢失
  • 可能与服务器路由配置冲突
  • 如果代码依赖 state 中的数据，数据丢失会导致渲染错误

三者对比 ​

query ​

  • 显示在 URL 中（?key=value）
  • 刷新后数据保持
  • 适合分享和 SEO
  • 无需路由配置
  • 数据暴露在 URL 中

params ​

  • 可以显示在 URL 中（/user/:id）
  • 需要在路由中预先定义
  • 刷新后可保持（路径参数）
  • 适合 RESTful 风格的路由
  • query 方式跳转时不生效

state ​

  • 不显示在 URL 中
  • 刷新后数据丢失
  • 依赖 History API
  • 适合临时数据传递
  • 可能导致白屏问题

使用建议 ​

选择 query 的场景 ​

  • 需要分享链接给他人
  • 需要 SEO 优化
  • 需要数据持久化
  • 筛选、搜索、分页等功能
  • 不涉及敏感数据

选择 params 的场景 ​

  • RESTful API 风格的路由
  • 路径参数传递
  • 动态路由匹配
  • 需要在路由层面管理的参数

选择 state 的场景 ​

  • 临时性数据传递
  • 敏感数据（不想显示在 URL）
  • 大量数据传递
  • 注意做好刷新处理

最佳实践组合 ​

  • 公开数据：优先使用 query
  • 路径参数：使用 params
  • 敏感数据：使用 sessionStorage 或 Vuex/Pinia
  • 临时数据：考虑 state（需要处理刷新）