请各位大佬指点！vue项目： 刷新页面让未提交的form表单不发生变化，并且在切换组件后提示用户该页面数据有变动您尚未保存是否跳转的功能十分感谢

Question

vue项目：刷新页面让未提交的form表单不发生变化，并且在切换组件后提示用户该页面数据有变动您尚未保存是否跳转的功能，有谁做过吗？做过的，能否让我参考一下代码。没做过的，能否一起讨论一下。###问题描述
问题出现的环境背景及自己尝试过哪些方法
相关代码
//请把代码文本粘贴到下方（请勿用图片代替代码）
你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

刷新页面让未提交的form表单不发生变化，方法1：把数据存到Cookie或者sessionStorage，刷新时候created()中读取，表单提交后清空数据。方法2：使用vuex，表单绑定的数据，在刷新后重新附给vuex暂存的数据，提交后清空。并且在切换组件后提示用户该页面数据有变动您尚未保存是否跳转的功能给提交按钮绑定事件进行状态控制，没有点击的时候状态为false,点击过后变为true，离开当前页面，也就是组件销毁（beforeDestroy）的时候判断绑定状态是否为true,进行弹框提示。补充：在方法2的时候，实测vuex在刷新页面后数据会丢失，保存的值也就丢失了，针对这个问题，如果要使用vuex，则需要监听刷新页面的事件，在检测到刷新的时候把vuex的state存到sessionStorage里。所以还是方法1，比较可用。