Vue页面切换表单数据不清空
需求描述:
表单填写后,切换tab页再切回该页面时,表单内容依旧存在。
核心技术:
sessionStorage
beforeRouteLeave()
created()
解决方案:
beforeRouteLeave() 函数中将表单数据保存到sessionStorage中。
created() 函数中将保存在sessionStorage的数据重新赋值给表单。
代码展示:
-
存放表单
beforeRouteLeave(to, from, next) { // 保存表单数据 sessionStorage.setItem("form_data", JSON.stringify(this.form)); sessionStorage.setItem("mxList_data", JSON.stringify(this.mxList)); next(); }
-
取出表单
created(){ // 从sessionStorage中恢复数据 const formDataString = sessionStorage.getItem("form_data"); const mxListDataString = sessionStorage.getItem("mxList_data"); if (formDataString) { this.form = JSON.parse(formDataString); } if (mxListDataString) { this.mxList = JSON.parse(mxListDataString); } }