如何在$router.push方法中传递完整对象，避免出现[Object Object]异常

Vue路由传参相关问题解答 #

1. vue-router是否支持直接通过params传递复杂对象 #

默认不支持。路由参数在传递时默认会执行隐式的toString()序列化，普通对象调用该方法的返回值就是你收到的"[Object Object]"。而且你示例中的对象包含Map类型、函数方法这类不可序列化的内容，即使手动做JSON序列化也会丢失这部分数据。

2. 复杂对象路由传递的实现方案 #

根据你的数据类型可选两种方案：

• 若仅传递可序列化数据（无Map、函数、Symbol等特殊类型）：
  传参时手动做JSON序列化：

  this.$router.push({
    name: 'foo',
    params: { id: this.id, data: JSON.stringify(this.obj) }
  })
  

  接收时反序列化即可：

  const data = JSON.parse(this.$route.params.data)
  

• 若传递包含不可序列化内容的复杂对象：
  不要把数据放在路由参数中，可先将对象存入全局临时存储空间：
  比如Vue2可挂载到原型上：

  // 全局注册
  Vue.prototype.$tempRouteStore = Object.create(null)
  // 跳转前存数据
  this.$tempRouteStore.fooData = this.obj
  this.$router.push({ name: 'foo', params: { id: this.id } })
  // 目标组件取数据，用完记得清空避免内存占用
  const data = this.$tempRouteStore.fooData
  this.$tempRouteStore.fooData = null
  

3. 跨视图数据通信最优策略 #

根据项目规模和场景选择：

• 小数据、需要支持页面分享（url携带参数）：优先用JSON序列化后存入路由params/query
• 复杂临时数据、不需要体现在url中：
  • 小型项目：用全局临时存储、轻量事件总线（如mitt）即可，实现成本低
  • 中大型项目：优先用状态管理工具（Vue2用Vuex、Vue3用Pinia），所有跨视图共享数据统一存在store中读写，数据流向清晰可追溯，也便于后续扩展持久化缓存等能力
• 父子路由关联场景：还可以用provide/injectAPI传递数据，比路由参数更灵活

另外你目前用watch监听路由取参数的方式，若切换为状态管理方案后，可以直接监听store中对应数据的变化，不需要再绑定路由监听逻辑，性能和可维护性更好。

内容的提问来源于stack exchange，提问作者Lucosa