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

Question

What I'm trying to do is to pass some data from one component to another via router (I'm using Vue-Router-4 with Vue 3.0) . But the data that I'm getting back is just "[object Object]" instead of the actual value. Here is what I did. Inside the component that sends the data I have this function

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

inside my index.js I have this

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

And then inside the receiver component I have this snippet

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

Answer 1

I am assuming you this.questions is either array or object.

with router it is advised not to send objects and arrays. Instead send an id . And on the receiver page use that id to fetch the data.

Even if you want to pass object you can try this:

when adding routes, use props's Function mode so that it has a default property user and it will add route.params as props.

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

use this to push into your route

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