Vue中如何跨组件传递选中的产品数据

根据你用的技术栈和业务需求，选下面几种成熟方案即可：

1. 路由带唯一ID传参（首推，兼容性最好） #

• 不要直接把整个产品对象塞路由里，只需要在点击跳转时，把当前产品的唯一标识（比如productId）拼在路由路径或者query参数里：
  • 动态路由形式：跳转目标为 /product/edit/[产品ID]，比如 /product/edit/10086
  • query参数形式：跳转目标为 /product/edit?id=10086
• 编辑页加载时，从路由参数里解析出productId，再调用产品详情接口拉取最新的完整产品信息渲染即可。
• 优势：刷新页面不丢数据、URL可直接分享、不会出现参数超长/转义问题，是生产环境最常用的方案。

2. 路由隐式传state（适合URL不想暴露参数的场景） #

• 主流路由库（Vue Router、React Router等）都支持跳转时携带不显示在URL上的state参数，跳转示例（以React Router v6为例）：

// 列表页点击跳转逻辑
navigate('/product/edit', {
  state: { productInfo: currentSelectedProduct }
})

• 编辑页直接从路由的location对象里读取state中的产品信息即可。
• 注意缺陷：用户手动输入URL进入编辑页、或者刷新页面时，路由state会丢失，必须做兜底：如果拿不到传过来的产品信息，要么读取路由上带的产品ID重新拉详情，要么直接跳转回产品列表页，避免页面报错。

3. 全局状态/临时缓存传参（适合复杂交互场景） #

• 如果项目接入了全局状态管理（Pinia、Redux、Zustand等），可以在点击产品时，把选中的产品信息存入全局store的临时字段，编辑页直接从store读取数据。
• 轻量项目不想引入状态管理的话，也可以用sessionStorage做临时中转：点击时把产品信息序列化后存入，编辑页加载时读取解析，页面卸载时记得清除对应缓存避免脏数据。
• 这个方案同样需要做兜底逻辑，处理直接访问、刷新导致的数据丢失问题。

最佳实践：无论选哪种传参方式，都建议在路由上始终携带产品ID，编辑页优先读取直接传递过来的产品信息做首屏快速渲染，如果信息丢失就用ID拉取最新详情，既保证打开速度，又能覆盖所有访问场景，还能避免前端缓存的旧数据和服务端最新数据不一致导致的编辑提交冲突。

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