Vue多页应用（MPA）如何实现不同页面间的状态与数据传递？

你配置的Vue多页应用本质是多个完全独立的Vue实例，每个页面加载时都会初始化全新的Vue、Vuex实例，Vuex的状态仅保存在当前页面的运行内存中，跳转新页面后原页面的实例完全销毁，所以无法通过原生Vuex实现跨页面状态共享，原方案的适用场景不匹配。

方案1：URL参数传递（最适配你的人员详情场景） #

这是最推荐的方案，符合HTTP规范，刷新不会丢失数据，也适配你已对接后端数据库的条件：

• 列表页跳转时将用户唯一标识拼接到目标页URL中，示例写法：

// 列表页点击跳转逻辑
window.location.href = `/profile.html?userId=${用户ID}`

• 个人资料页初始化时读取URL参数，调用后端接口拉取对应用户详情即可，读取参数示例：

const userId = new URLSearchParams(window.location.search).get('userId')
// 后续调用你对接的数据库接口查询用户详情

方案2：浏览器本地存储 #

适合传递无需后端查询的非敏感小数据：

• 跳转前将数据序列化后存入localStorage或sessionStorage：

// 列表页存储数据
localStorage.setItem('currentUser', JSON.stringify(用户信息对象))
window.location.href = '/profile.html'

• 目标页读取数据：

const currentUser = JSON.parse(localStorage.getItem('currentUser'))
// 读取完成后可根据需求删除存储的临时数据
localStorage.removeItem('currentUser')

方案3：Vuex持久化插件 #

如果需要保留Vuex的使用习惯，可引入vuex-persistedstate插件，将Vuex状态自动持久化到本地存储中，所有页面的Store初始化时都会读取持久化的状态，间接实现跨页面状态共享。

如果你的项目没有强需求必须使用多页架构，更推荐改为单页应用配合Vue Router实现路由跳转，此时Vuex可正常实现全应用内的状态共享，更适配Vue技术栈的生态能力。

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