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

Posted 2023-02-22

【中文标题】将对象作为参数传递给 router.push (vue-router@4.05)

【英文标题】：Pass an object as param to router.push (vue-router@4.05)

【发布时间】：2021-06-26 02:22:44

【问题描述】：

问题

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问题

【参考方案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...