【问题标题】：Pass an object as param to router.push (vue-router@4.05)将对象作为参数传递给 router.push (vue-router@4.05)
【发布时间】：2021-08-07 00:20:07
【问题描述】：

问题

router.push({name:"Order", params: {obj: {}}) 无法推送obj: {}，而是路由收到obj: '[object Object]'

情况

我有这样的路线设置

{
    path: '/Order',
    name: 'Order',
    component: () => import("../views/Order.vue"),
    props: route => {
      return route.params.obj //  '[object Object]'
    },
 }

这会导致 props 没有在 Order.vue 中定义

预期结果

{
    ...
    props: route => {
      return route.params.obj //  '{}'
    },
}

基于this answer 对象在旧版本中工作

我测试过的内容

我用 jest 检查了传递给 router.push 的参数，它们看起来应该是这样的：{name:"Order", params: {obj: {}}

有什么想法吗？

【问题讨论】：

路由参数是 URL 中的字符串（即/route/:param）。您如何期望这会将{} 序列化为字符串？
我也有同样的想法，但this 似乎表明您可以将对象作为参数传递
2 年前有人问过这个版本要旧得多
github.com/vuejs/vue-router-next/issues/494
因为它是可能的，我想知道它是否仍然存在。感谢github问题

标签： vue.js vue-router vuejs3 vue-router4

【解决方案1】：

在 Vue-router 中将对象传递给 params 是 never supported

它在带有$router.push 的Router v3 中工作 - 目标组件接收到对象。但是一旦用户开始使用浏览器导航（后退按钮）或复制/粘贴 URL，这个解决方案就被破坏了（你可以试试 here - 只需单击按钮，然后使用后退和前进控件帧）

根据经验 - 如果您想将 anything 传递给目标路由/组件，则必须将此类数据定义为路由定义中的参数，以便可以直接包含在 URL 中。替代方法是在存储中传递数据、查询参数（对象需要用JSON.stringify 序列化）或使用历史状态。

这对于 Vue-router v3 是正确的，并且仍然适用于 Vue-router v4

注意

只是为了解释替代方案。我所说的“商店”不仅仅是指 Vuex。我知道 Vuex 对于一些小型应用程序来说可能是矫枉过正。与现有的 Vuex 相比，我个人更喜欢 Pinia。并且您可以非常轻松地创建全局状态解决方案yourself with composition API...

【讨论】：