Vue如何保存当前页面的状态

0.引言

原始实现 先在代理商页面注册代理商信息，再在账号管理页面新建账号并绑定代理商。

用户的反馈 麻烦，明明一件事，却需要切换不同页面，还需要再账号管理中找到代理商板块（有误操作的现象）。

改进方向 注册代理商成功后，带着信息跳转到账号管理页面。

由此，提出了保留当前页面状态的需求。

1.问题的本质探讨

1.1 保留当前页面的状态

==》 保留当前页面的部分/全部的data信息
===》 如何将需要的data数据传递到下个页面

1.2 Vue页面的本质

Vue页面的本质是组件
==》 组件销毁与否传参方式是有所不同的

2.问题的解决方案

2.1 组件销毁的情况下传递参数

2.1.1 利用本地存储

原理：
localstorage、sessionstorage可以存储当前页面信息，再在新的页面将这些信息读取出来！
事实上vuex（zhi）存储也可以，只是vuex的信息一刷新就会丢失，使用前需要考虑是否适合应用的场景。
源码实现：
locatStorage.setItem(“type”,“agent”)
locatStorage.getItem(“type”)

优点：

兼容性好，不需要额外库或工具。
简单快捷，基本可以满足大部分需求。

缺点：

数据通过 JSON 方法储存（相当于深拷贝），如果状态中有特殊情况（比如 Date 对象、Regexp 对象等）的时候会得到字符串而不是原来的值。（具体参考用 JSON 深拷贝的缺点）

2.1.2 利用路由参数

原理： router本身就是可以带参数。（参考vue ro
uter 进行跳转并传参）
源码实现：
search(param) {
// 其他处理
this.$router.push({
name: “account”,
query: { …“agent” }, // 将对象展开为键值
});
},
注意：
query和param的区别
缺点：

1. params刷新后数据会丢失
2. query刷新后不丢失，但是信息按格式放在路径中，由于url本身限制，一方面路径长度是有限的，另一方面只能key：value键值对方式传递，易读性和扩展性明显更差

2.2 组件仍在的情况下

将切换的组件作为子组件进行渲染，这样原组件不会被销毁，数据自然也不会丢失。
数据间的通信按照父子组件通信即可（参考父子组件通信）
优点：

1. 代码量少
2. 不需要考虑状态传递过程中的错误

缺点：
增加维护原组件的成本
需要传入额外的 prop 到 B 组件
无法利用路由定位页面
拓展
多个子组件可用缓存组件

<keep-alive></keep-alive>