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

router.push({name:"Order", params: {obj: {}}) fails to push obj: {}, instead the route receives 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 //  '{}'
    },
}

基于这个答案对象在旧版本中工作

Based on this answer objects work in older versions

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

I've used jest to inspect the arguments passed to router.push and they appear as they should: {name:"Order", params: {obj: {}}

有什么想法吗?

推荐答案

将对象传递给 params 是 从未支持 Vue-router

Passing objects to params was never supported in Vue-router

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

It sort of worked in Router v3 with $router.push - the target component received the object. BUT as soon as user started using browser navigation (Back button) OR copy/pasting URL's, this solution was broken (you can try it here - just click the button and then use back and forward controls of the frame)

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

As a rule of thumb - if you want to pass anything to the target route/component, such data must be defined as parameters in the route definition so it can be included directly in the URL. Alternatives are passing data in a store, query params (objects needs to be serialized with JSON.stringify), or using the history state.

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

This was true for Vue-router v3 and is still for Vue-router v4

注意

只是为了解释替代方案.通过商店"我的意思不只是 Vuex.我知道 Vuex 对于一些小型应用程序来说可能有点矫枉过正.与现有的 Vuex 相比，我个人更喜欢 Pinia.你可以很容易地创建全局状态解决方案你自己使用组合 API...

Just to explain alternatives. By "store" I do not mean just Vuex. I understand Vuex can be overkill for some small applications. I personally prefer Pinia over existing Vuex. And you can create global state solution yourself with composition API very easily...

这篇关于将对象作为参数传递给 router.push (vue-router@4.05)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！