将对象作为参数传递给 router.push (vue-router@4.05)
Pass an object as param to router.push (vue-router@4.05)
问题
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: route => {
return route.params.obj // '{}'
},
}
基于 对象在旧版本中工作
我测试了什么
我用 jest 检查了传递给 router.push 的参数，它们按应有的方式显示：{name:"Order", params: {obj: {}}
有什么想法吗？
在 Vue-router
中 never supported 将对象传递给 params
它在 Router v3 中与 $router.push 一起工作 - 目标组件接收到对象。 但是 一旦用户开始使用浏览器导航（后退按钮）或 copy/pasting URL，这个解决方案就失效了（你可以试试 here - 只需单击按钮，然后使用框架的后退和前进控件）
根据经验 - 如果您想将 任何东西 传递给目标 route/component，此类数据必须在路由定义中定义为参数，以便它可以直接包含在URL中。备选方案是在存储中传递数据、查询参数（对象需要使用 JSON.stringify 序列化）或使用历史状态。
Vue-router v3 是这样，Vue-router v4 也是如此
备注
只是为了解释备选方案。我所说的“商店”不仅仅指 Vuex。我知道 Vuex 对于一些小型应用程序来说可能有点矫枉过正。我个人比较喜欢Pinia over existing Vuex. And you can create global state solution yourself with composition API很容易...
问题
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: route => {
return route.params.obj // '{}'
},
}
基于
我测试了什么
我用 jest 检查了传递给 router.push 的参数，它们按应有的方式显示：{name:"Order", params: {obj: {}}
有什么想法吗？
在 Vue-router
中 never supported 将对象传递给params
它在 Router v3 中与 $router.push 一起工作 - 目标组件接收到对象。 但是 一旦用户开始使用浏览器导航（后退按钮）或 copy/pasting URL，这个解决方案就失效了（你可以试试 here - 只需单击按钮，然后使用框架的后退和前进控件）
根据经验 - 如果您想将 任何东西 传递给目标 route/component，此类数据必须在路由定义中定义为参数，以便它可以直接包含在URL中。备选方案是在存储中传递数据、查询参数（对象需要使用 JSON.stringify 序列化）或使用历史状态。
Vue-router v3 是这样，Vue-router v4 也是如此
备注
只是为了解释备选方案。我所说的“商店”不仅仅指 Vuex。我知道 Vuex 对于一些小型应用程序来说可能有点矫枉过正。我个人比较喜欢Pinia over existing Vuex. And you can create global state solution yourself with composition API很容易...