如何实现 vue 实现 tab 切换页面内容 保存用户输入的内容

[IdJoel]

接到一个需求 要我去做一个 tab 切换页面的功能 需求是这样说的：

如果用户在 a 页面添写一些表单，同时要查看 b 页面，希望能在同一个 url 下进行切换，切换后 a 页面输入的数据依旧存在，且可以随时切换。

我的思路是去拿页面的模版，进行页面上的替换 但是这样就会遇到一个问题

如果用户刷新页面，那刷新的是当前页面，可是我好像没办法阻止浏览器默认的刷新事件。能保证 a 页面的表单不被清空，请教一下大佬我该如何实现该功能。

[nwu2Cv8OZ2MZMg39]

keep-alive

[m939594960]

{current_tab:"a_data",a_data:{"name":2},b_data:{"name":2}}

[biabia123456]

keep-alive +1 冻结之前的页面 会多一个生命周期为 activated

[m939594960]

watch:(a_data){ localstorage['a_data']=a_data }

[mikoshu]

keep-alive 完美解决

[biabia123456]

如果要实现用户刷新页面 那就只有数据存下来然后回填了

[T3RRY]

学到了

[gzlock]

使用 onbeforeunload 事件在网页关闭 /刷新前提示用户会丢失数据
在父组件或 vuex 存数据
4 楼的做法可以更进一步，使用 computed 将整个表单数据使用 localstorage 存与取

[moxiaonai]

keep – alive, vuex 都可以

[X37B]

https://cn.vuejs.org/v2/guide/components-dynamic-async.html