Vue中通过this.$router.push跳转页面时如何传递数组参数

方案1：query参数传递（支持页面刷新后保留参数，适合小体积数组） #

$router.push的query参数会拼接在URL末尾，数组需要先序列化为JSON字符串再传递：

// 跳转页逻辑（表单提交后执行）
const yourArray = [/* 你需要传递的数组内容 */]
this.$router.push({
  path: '/target-page-path',
  query: {
    arrayData: JSON.stringify(yourArray)
  }
})

目标页接收逻辑：

// 目标页面生命周期中获取参数
const receivedArray = JSON.parse(this.$route.query.arrayData)

• 注意事项：URL有长度限制，数组序列化后字符数建议控制在2000以内，避免被浏览器截断。

方案2：params参数传递（无需序列化，适合中等体积数组） #

params参数不会拼接在URL中，可直接传递数组，要求跳转时使用路由name而非path：
首先需要在路由配置中为目标页配置name属性：

// 路由配置示例
{
  path: '/target-page-path',
  name: 'TargetPage', // 必须配置name属性
  component: () => import('@/views/TargetPage.vue')
}

跳转页逻辑：

const yourArray = [/* 你需要传递的数组内容 */]
this.$router.push({
  name: 'TargetPage', // 此处必须用name，不能用path
  params: {
    arrayData: yourArray
  }
})

目标页接收逻辑：

const receivedArray = this.$route.params.arrayData

• 注意事项：页面刷新后params参数会丢失，仅适合不需要刷新后保留数据的场景。

方案3：全局状态管理传递（适合大体积数组、多页面共享场景） #

如果数组体积较大或者需要多页面复用，可以使用Vuex/Pinia存储数组后再跳转：

// 跳转页逻辑
this.$store.commit('savePassArray', yourArray) // 存入Vuex
this.$router.push('/target-page-path')

// 目标页逻辑
const receivedArray = this.$store.state.passArray

• 注意事项：刷新页面后Vuex/Pinia数据会丢失，需要持久化可搭配localStorage存储。

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