Angular如何通过路由将对象数组从一个页面传递到另一个页面

核心注意点：不要直接将未序列化的对象数组作为URL查询参数传递，会出现参数丢失、格式异常问题。

以下是两种适配不同场景的实现方案，适配你给出的数组结构：

const targetArr = [
  { attributeName: "name0", attributeValue: "val0" },
  { attributeName: "name1", attributeValue: "val1" },
  { attributeName: "name2", attributeValue: "val2" }
]

方案1：参数序列化传递（适合短数组、无敏感数据场景） #

跳转时先序列化数组为字符串传递，第二页接收后反序列化即可：

• 序列化时增加编码处理，避免JSON特殊字符被URL自动转义导致解析失败
• 数组长度过长时不推荐使用，URL存在长度上限

Vue Router 实现示例 #

第一页按钮跳转逻辑：

goToSecondPage() {
  const arrStr = encodeURIComponent(JSON.stringify(targetArr))
  this.$router.push({
    path: '/second-page',
    query: { passData: arrStr }
  })
}

第二页接收逻辑：

created() {
  const arrStr = this.$route.query.passData
  this.receiveArr = arrStr ? JSON.parse(decodeURIComponent(arrStr)) : []
}

React Router 实现示例 #

第一页按钮跳转逻辑：

import { useNavigate } from 'react-router-dom'

function FirstPage() {
  const navigate = useNavigate()
  const goToSecondPage = () => {
    const arrStr = encodeURIComponent(JSON.stringify(targetArr))
    navigate(`/second-page?passData=${arrStr}`)
  }
}

第二页接收逻辑：

import { useSearchParams } from 'react-router-dom'

function SecondPage() {
  const [searchParams] = useSearchParams()
  const arrStr = searchParams.get('passData')
  const receiveArr = arrStr ? JSON.parse(decodeURIComponent(arrStr)) : []
}

方案2：临时存储/全局状态传递（适合长数组、含敏感数据场景） #

数组长度大或包含敏感数据时，不需要拼接URL参数，用临时存储传递即可：

• 可选用localStorage/sessionStorage做临时存储，也可以用Pinia/Vuex/Redux等全局状态库存储
• 读取完成后可清除临时存储，避免数据残留

通用localStorage实现示例：
第一页按钮跳转逻辑：

goToSecondPage() {
  localStorage.setItem('routePassArr', JSON.stringify(targetArr))
  // 直接执行路由跳转即可，不需要携带参数
  this.$router.push('/second-page')
}

第二页接收逻辑：

created() {
  const arrStr = localStorage.getItem('routePassArr')
  this.receiveArr = arrStr ? JSON.parse(arrStr) : []
  // 读取完成后清除临时数据
  localStorage.removeItem('routePassArr')
}

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