如何使用带有 Vue 3 的 Vue Router 将对象作为道具传递？答案

【问题标题】：How to pass an object as props with Vue Router with Vue 3?如何使用带有 Vue 3 的 Vue Router 将对象作为道具传递？
【发布时间】：2022-01-09 09:17:26
【问题描述】：

如何使用 Vue Router 在 Vue 3 中将对象作为道具传递？这可以在 Vue 2 中按照接受的答案here 及其对应的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() 传递对象吗？

【问题讨论】：

标签： vue.js vue-router vuejs3

【解决方案1】：

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

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

然后在另一个组件中：

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

【讨论】：

谢谢，对不起，我应该更明确一点。我的具体目标是避免在 JSON.parse 中使用 JSON.stringify，因为我试图传递的对象相当大，在这种情况下 JSON.stringify 很慢。
我明白了，正如我所提到的，在我看来，您不应该通过参数传递大型对象。如果感觉是这样，那可能是您的应用程序设计中的一个缺陷。考虑重构您的代码并改用存储或事件。

【解决方案2】：

我很犹豫，说我认为这在 Vue3 中是不可能的。

你可以看看像Vuex 这样的状态管理器，看看它是否能解决你的问题。状态管理器概念将允许您跨多个视图保持复杂对象。

【讨论】：