vue.js - 将对象作为参数传递给 router.push (vue-router@4.05)

Question

问题

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]'
    },
 }

这会导致 Order.vue

中没有定义 props

预期结果

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

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

我测试过的内容

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

有什么想法吗？

Answer 1

将对象传递给 params 是 never supported在 Vue 路由器中

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

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

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

注意

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