javascript - 为什么通过 Vue-router 传递数据返回 "[object Object]"？

Question

我想做的是通过路由器将一些数据从一个组件传递到另一个组件(我在 Vue 3.0 中使用 Vue-Router-4)。但是我返回的数据只是“[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')
},

然后在接收器组件中我有这个片段

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

Answer 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
    }
})