Vue路由跳转时不应直接传递对象，应采用预存状态、sessionStorage或动态路由+API兜底方案；避免将对象塞入URL、使用history.state或router.replace传参。

Vue 路由跳转时直接传递对象（如 router.push({ path: '/user', query: { user } })）会导致对象被自动序列化为 [object Object]，刷新后数据丢失——这不是 Vue 的 bug，而是浏览器 URL 的天然限制。真正可靠的方式是避免把复杂对象塞进 URL，改用更健壮的方案。

✅ 用 路由元信息 + 状态管理 预存数据

适合跳转目标页逻辑确定、数据来源可控的场景（如列表页 → 详情页）。提前把对象存在 Pinia/Vuex 或组件级响应式状态中，跳转时只传唯一标识（如 id），目标页再根据 id 查找预存数据。

• 在列表页点击前，先存入 store：useUserStore().setTempUser(currentUser)
• 跳转只传 id：router.push('/user/123')（或命名路由 + params）
• 详情页 onMounted 中通过 route.params.id 从 store 取出对象，无需额外请求

✅ 用 sessionStorage / localStorage 暂存临时对象

适合不依赖全局状态、又需要跨刷新保留的轻量数据（注意敏感信息勿存）。对象需 JSON.stringify 后写入，目标页读取后及时清理。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 跳转前：sessionStorage.setItem('tempUser', JSON.stringify(user))
• 目标页 mounted 时：const user = JSON.parse(sessionStorage.getItem('tempUser') || '{}')
• 读取后立即清除：sessionStorage.removeItem('tempUser')，防重复使用

✅ 用 动态路由 + 后端接口兜底（推荐长期方案）

最符合 REST 原则的做法：URL 只携带语义化参数（如 /user/:id），目标页初始化时调用 API 获取完整数据。即使刷新，也能重新拉取。

立即学习“前端免费学习笔记（深入）”；

• 配置路由：{ path: '/user/:id', component: UserDetail }
• 页面内用 useRoute().params.id 触发 fetchUser(id)
• 配合 keep-alive 缓存已加载页，避免重复请求（非必需但体验更优）

❌ 避免这些常见误区

不要 把对象直接放 query 或 params；不要 用 history.state 传参（SPA 跳转不触发 popstate）；不要 依赖 router.replace + state 实现跨页数据传递（兼容性和可维护性差）。