Vue3中路由传递对象数组参数及遍历的正确语法问题排查

你遇到的["[object Object]","[object Object]"]是因为Vue Router的params参数会被序列化到URL中——对象/数组这类复杂数据无法直接在URL里传递，浏览器会自动调用每个对象的toString()方法，把它们转成"[object Object]"字符串，最终数组就变成了两个这样的字符串元素。

另外还要纠正一个小问题：你原来写的questions props里直接加id: String, body: String是无效的，数组类型的props需要用validator来校验元素结构，或者配合正确的默认值写法。

解决方案1：序列化JSON字符串（适合小型数组） #

如果你的问题数组不大，可以把它转成JSON字符串传递，接收时再解析回来：

发送方（router-link处） #

把questions数组用JSON.stringify()转成字符串：

<router-link :to="{ 
  name: 'finder_step', 
  params: { 
    id: 2, 
    questions: JSON.stringify([ { id: 'q1', body: 'one' }, { id: 'q2', body: 'two' } ]) 
  } 
}" > Step 2 </router-link>

接收方（目标组件） #

1. 把questions的props类型改成String
2. 用计算属性解析JSON字符串，同时做错误处理避免解析失败：

<template>
  <div>
    <p>ID: {{ id }}</p>
    <p>Question: {{ parsedQuestions }}</p>
    <li v-for="question in parsedQuestions" :key="question.id" >
      {{ question.body }}
    </li>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    questions: {
      type: String,
      default: '[]' // 默认空数组的JSON字符串
    }
  },
  computed: {
    parsedQuestions() {
      try {
        // 解析JSON字符串回数组
        return JSON.parse(this.questions)
      } catch (error) {
        // 解析失败返回空数组
        console.error('Failed to parse questions:', error)
        return []
      }
    }
  }
}
</script>

解决方案2：使用状态管理（适合大型/需要持久化的数组） #

如果你的问题数组比较大，或者希望刷新页面后数据不丢失，推荐用Vuex或Pinia这类状态管理工具传递数据：

1. 配置状态管理（以Vuex为例） #

在store里定义状态和mutation：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentQuestions: []
  },
  mutations: {
    SET_CURRENT_QUESTIONS(state, questions) {
      state.currentQuestions = questions
    }
  }
})

2. 发送方（router-link处） #

点击链接前先把数据存入store：

<router-link 
  :to="{ name: 'finder_step', params: { id: 2 } }" 
  @click.native="saveQuestions"
> Step 2 </router-link>

<script>
export default {
  methods: {
    saveQuestions() {
      const questions = [ { id: 'q1', body: 'one' }, { id: 'q2', body: 'two' } ]
      this.$store.commit('SET_CURRENT_QUESTIONS', questions)
    }
  }
}
</script>

3. 接收方（目标组件） #

直接从store获取数据，不需要通过props传递questions：

<template>
  <div>
    <p>ID: {{ id }}</p>
    <p>Question: {{ $store.state.currentQuestions }}</p>
    <li v-for="question in $store.state.currentQuestions" :key="question.id" >
      {{ question.body }}
    </li>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  }
}
</script>

修正你的Props定义 #

如果用方案1之外的场景传递数组，正确的数组props校验应该是这样的：

props: {
  id: {
    type: String,
    default: ''
  },
  questions: {
    type: Array,
    // 数组默认值要写成函数，避免引用类型共享问题
    default: () => [],
    // 可选：校验每个元素的结构
    validator: (value) => {
      return value.every(item => {
        return typeof item === 'object' && item.id && item.body
      })
    }
  }
}

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