路由跳转时如何从父组件向子组件传对象避免出现undefined

根据你使用的组件交互形式，优先选以下对应方案即可：

场景1：父子组件同页面（仅显隐切换，无路由跳转） #

这是成本最低的方案，直接用组件原生props传值即可：

• 给editClient子组件声明一个接收客户数据的自定义属性，比如命名为currentClient
• 点击编辑按钮拿到完整客户对象后，直接把对象赋值给父组件中绑定给currentClient的变量即可
• 不同框架的接收方式：
  • Vue：子组件通过props字段声明接收
  • React：子组件直接从函数入参的props中解构获取
  • Angular：子组件用@Input()装饰器声明接收属性

场景2：编辑页为独立路由页面（需要跳转路由） #

方案A：路由参数传值（你当前的场景优先选这个） #

你的客户数据对象体积很小，直接走路由传参最方便：

// 列表页跳转逻辑
const client = 你当前拿到的客户对象
// 转成编码后的JSON字符串，避免特殊字符解析错误
const clientStr = encodeURIComponent(JSON.stringify(client))
// 路由跳转（以下为通用示例，根据你用的路由语法调整即可）
router.push({
  path: '/editClient',
  query: { client: clientStr }
})

// 编辑页接收逻辑
const clientStr = decodeURIComponent(route.query.client)
const currentClient = JSON.parse(clientStr)

注意：如果你的客户数据里包含敏感信息，不要用这个方案，避免参数暴露在地址栏

方案B：临时缓存/全局状态管理 #

如果数据量大或者需要多页面共享，选这个方案：

• 优先用项目已有的状态管理工具（Pinia/Vuex/Redux/Angular Service等）存储客户对象，编辑页直接从全局状态取值即可
• 不想引入状态管理的话，也可以用sessionStorage临时存储，用完删除避免冗余：

// 列表页存储
sessionStorage.setItem('editClientData', JSON.stringify(client))
// 编辑页取值
const currentClient = JSON.parse(sessionStorage.getItem('editClientData'))
// 编辑提交/退出页面时删除缓存
sessionStorage.removeItem('editClientData')

通用注意事项 #

• 编辑组件拿到数据后建议加一层空值/格式校验，避免数据异常导致表单崩溃
• 方案选择优先级：props传值 > 路由传参 > 全局状态/缓存，越简单的方案后续维护成本越低

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