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

原因1：模板直接输出引用类型值 #

如果你的this.questions本身是对象/数组类型，你在接收组件的模板中直接用{{ data }}插值渲染，JS会自动调用引用类型的toString()方法，输出结果就是[object Object]。这种情况你在mounted钩子中打印的this.data应该是正常的数组/对象结构，仅模板展示异常。

原因2：Vue Router 4 未匹配动态段的params传参失效 #

Vue Router 4 官方已经废弃了不与路由path动态段匹配的params传参用法，你的路由path没有定义对应data参数的动态段，此时通过params传递的非动态段参数会被静默丢弃或者被路由处理为异常值，最终拿到的data不是预期的this.questions值。

对应不同原因的解决方式如下：

• 如果是原因1（模板展示问题）：不要直接输出整个对象/数组，按需访问具体属性即可。如果this.questions是数组就用v-for遍历，是对象就写{{ data.属性名 }}访问具体字段。
• 如果是原因2（路由传参失效），有三种可选方案：

方案1：改用query传参（适合少量非敏感数据） #

把传递的参数序列化后放到query中，接收端再反序列化：
发送端代码修改：

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

接收端代码修改：

props: {
  data: String
},
mounted() {
  const questionData = JSON.parse(this.data)
  console.log("解析后的参数", questionData);
},

路由配置不需要修改，注意query参数会暴露在地址栏，不要传递敏感数据，且数据量不要过大。 #

方案2：使用Pinia传递复杂数据（最优解） #

如果是大量复杂数据或者敏感数据，用Pinia存储传递是最优解：

1. 定义Pinia存储：

// stores/question.js
import { defineStore } from 'pinia'
export const useQuestionStore = defineStore('question', {
  state: () => ({
    transferData: null
  }),
  actions: {
    setTransferData(data) {
      this.transferData = data
    }
  }
})

2. 发送端跳转前存值：

import { useQuestionStore } from '@/stores/question'
const questionStore = useQuestionStore()
goToQuestions() {
  questionStore.setTransferData(this.questions)
  this.$router.push({ name: "QuestionsPage" })
}

3. 接收端直接从store取值：

import { useQuestionStore } from '@/stores/question'
const questionStore = useQuestionStore()
mounted() {
  console.log("拿到的参数", questionStore.transferData);
}

这种方式没有数据大小限制，不会暴露参数，配合Pinia持久化插件还可以实现刷新后数据不丢失。 #

方案3：路由配置动态段（不推荐传复杂对象） #

如果一定要用params传参，可以在路由path中添加动态段，动态段参数仅支持字符串类型，因此仍需要序列化处理：
路由配置修改：

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

发送端传递时序列化：

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

接收端反序列化即可使用，缺点是参数会暴露在地址栏，且存在长度限制。

内容的提问来源于stack exchange，提问作者Samakaab