将对象作为参数传递给 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]'
    },
 }

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

预期结果

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

根据这个答案，对象可以在旧版本中工作

我测试过的

我使用 jest 来检查传递给的参数router.push，它们按应有的方式显示：{name:"Order", params: {obj: {}}

有任何想法吗？

Answer 1

Vue-router 从来params不支持将对象传递给

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

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

对于 Vue-router v3 来说是这样，对于 Vue-router v4 来说仍然如此

笔记

只是为了解释替代方案。我所说的“存储”并不仅仅指 Vuex。我知道 Vuex 对于某些小型应用程序来说可能有点过分了。相比现有的 Vuex，我个人更喜欢Pinia。您可以使用组合 API轻松创建全局状态解决方案......