2

问题

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: {}}

有任何想法吗？

4

1 回答 1

4

Vue-routerparams从不支持将对象传递给

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

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

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

笔记

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

于 2021-04-20T14:12:20.843 回答