為什么通過 Vue-router 傳遞數據返回“[object Object]”？

Question

我想做的是通過路由器將一些數據從一個組件傳遞到另一個組件（我正在使用 Vue-Router-4 和 Vue 3.0） 。 但是我返回的數據只是“[object Object]”而不是實際值。 這是我所做的。 在發送數據的組件內部，我有這個 function

 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是數組或 object。

對於路由器，建議不要發送對象和 arrays。而是發送一個id 。 並在接收者頁面上使用該id來獲取數據。

即使你想通過 object 你也可以試試這個：

添加路由時，使用 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
    }
})