Skip to content

Vue Router 中的 params 、query 和 state 对比

query

工作原理

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

使用场景

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

特点

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

params

工作原理

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

使用场景

  • 需要在路由配置中预先定义(如:path: '/user/:id'
  • 通过 this.$route.paramsroute.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(需要处理刷新)