为什么通过 Vue-router 传递数据返回“[object Object]”？答案

【问题标题】：Why passing data through Vue-router returning "[object Object]"?为什么通过 Vue-router 传递数据返回“[object Object]”？
【发布时间】：2021-10-17 09:23:14
【问题描述】：

我要做的是通过路由器将一些数据从一个组件传递到另一个组件（我正在使用 Vue-Router-4 和 Vue 3.0）。但是我得到的数据只是“[object Object]”而不是实际值。这就是我所做的。在发送数据的组件内部我有这个功能

goToQuestions() {
  this.$router.push({
    name: "QuestionsPage",
    params: {
      data: this.questions
    },
  });
},

在我的 index.js 里面我有这个

{
  path: "/questions-page",
  name: "QuestionsPage",
  props: true,
  component: () =>
    import ('@/views/QuestionsPage.vue')
},

然后在接收器组件内部我有这个 sn-p

props: ["data"],
  mounted() {
    console.log("data coming from the router", this.data);
  },

【问题讨论】：

我已经尝试循环遍历数据，我什至使用了 JSON.stringfy() 但显然它们都没有工作

标签： javascript vue.js javascript-objects vuejs3 vue-router4

【解决方案1】：

我假设你 this.questions 是数组或对象。

建议不要使用路由器发送对象和数组。而是发送 id 。并在接收方页面上使用 id 获取数据。

即使你想传递对象，你也可以试试这个：

添加路由时，使用props的Function模式，使其有一个默认的属性user，它会添加route.params作为props。

{
    path: '/questions',
    name: 'questions',
    component: QuestionsComponent,
    props: (route) => ({
        user: userData,
        ...route.params
    })
}

用它来推进你的路线

self.$router.push({
    name: 'questions',
    params: {
        data: this.questions
    }
})

【讨论】：