如何在Vue 3中使用Vue Router将对象作为props传递？

Question

如何在Vue 3中使用Vue Router将对象作为props传递？在Vue 2中，可以按照这里的接受答案和相应的JSFiddle来实现。在Vue 3中，与Vue 2不同，此语法会将推送的对象字符串化为"[object Object]"。我已经尝试了在以下fiddle中使用Vue 3。

const Home = { template: '<div>Home</div>',
               mounted: function() {
                this.$router.push({
                    name: "about",
                    params: {
                        user: "User Name",
                        objectParam: {a: "a"}
                    }
                  })
                }}
const About = { template: '<div>About</div>',
                                props: ['user', 'o', 'objectParam'],
                mounted: function(){
                    console.log( "Passed props:" )
                    console.log( this.$props )
                }}

const routes = [
  { path: '/', component: Home },
  { path: '/about', name:"about", component: About, 
                                  props: route => (
                                         console.log("Params defined here are passed as objects."),
                                         console.log("But route params object passed via push has already been stringified."),
                                         console.log(route.params),
                                         {o: {b: "b"},
                                          ...route.params
                                          })},
]


const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

const app = Vue.createApp({})
app.use(router)
app.mount('#app')

Vue 3中是否可以通过Vue Router push()传递对象？

- HHL

Answer 1

我没有找到任何来自Vue Router的官方文档来支持这一点，而且说实话，我不认为将动态对象作为参数发送是一个好主意。但是，如果你真的想这样做，一种实现方法是将你的对象字符串化，然后在接收方解析它。所以可以像这样：

this.$router.push({
    name: "about",
    params: {
        user: "User Name",
        objectParam: JSON.stringify({ a: "a" })
    }
})

然后在另一个组件中：

JSON.parse(this.$route.params.objectParam)

- hatef

---

谢谢和抱歉，我应该更明确一些。我特别想避免在这里使用JSON.stringify转换为JSON.parse，因为我尝试传递的对象相当大，而且在这种情况下JSON.stringify很慢。 - HHL

我明白了，正如我所提到的，在我看来，你不应该通过参数传递大型对象。如果感觉是这样，那么可能是你的应用程序设计存在缺陷。考虑重构你的代码，使用存储或事件代替。 - hatef

Answer 2

我冒昧地说，我认为在Vue3中这是不可能的。

你可以看一下状态管理器Vuex，看看它是否能解决你的问题。状态管理器的概念将允许你在多个视图之间保持一个复杂的对象。

- Mock Coder

Answer 3

还有一件事需要注意，除了将其转换为字符串之外，在Vue3中，如果我们现在从Vuex中获取这个对象，我们将得到一个代理。这也会带来麻烦。

为了解决这个问题，我们首先需要将代理转换为普通对象，例如使用lodash的cloneDeep函数。

router.push({
  params: {
    objFromVuex: JSON.stringify(cloneDeep(objFromVuex))
  }
});

为了读取这个值，只需要使用JSON.parse函数。

const objFromVuex = JSON.parse(this.$route.params.objFromVuex);

- Alonad