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

Posted 2023-03-16

【中文标题】为啥通过 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() 但显然它们都没有工作

【参考方案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
    
)