2

我想要做的是通过路由器将一些数据从一个组件传递到另一个组件（我正在使用 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')
},

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

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

4

1 回答 1

0

我假设您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
    }
})
于 2021-08-15T05:43:03.157 回答