vue实现路由跳转到新页面，返回旧页面，保留之前的数据记录

需求描述：
在使用 vue 开发前端的时候遇到一个场景：在页面表格上点击跳转到别的页面后，浏览详后返回主页。但这时候之前的搜索记录和翻页就消失了，用户体验不好。所以需要在返回后恢复跳转前的页面参数状态。
// 页面查询参数示例
searchForm:{
createId: ‘’, // 创建人
entranceType: 2, // 问题入口
leaderId: [], // 上级检查者
modelName: ‘’, // 模块编号或名称
planName: ‘’, //计划编号或名称
productNameOrCode: ‘’, // 产品名称或编号
projectNameOrCode: ‘’, // 项目名称或编号
status: [], // 状态
titleOrRequireName: ‘’, // 问题名称或需求名称
urgent: [], // 紧急程度
versionCode: ‘’, // 版本编号
versionPackageCode: ‘’, // 版本包编号
weight: [], // 重要程度
wishTime: [], // 期望解决时间
dutyStaffList: [], // 责任人
},
在相关操作路由跳转时，对当前页面的参数进行一个存放处理，此示例将数据放在 Session Storage 里面（也可以用vxe和localStorage）。
// 往sessionStorage存查询条件数据,用于路由返回时查询条件不变
const _data = Object.assign(this.searchForm, {});
sessionStorage.setItem(‘nowRequirePageData’, JSON.stringify(_data));
this.$router.push({
path:‘/project-mgr/planDetails’,
query:{
id: planId,
tab: this.showTab,
isPlanTo: 1,
}
});

加载页面时检查是否有保存的参数，有的话进行相应恢复操作：
mounted() {
// 判断 sessionStorage中是否有保存的搜索参数
if (sessionStorage.getItem(‘nowRequirePageData’)) {
let searchConditon = JSON.parse(sessionStorage.getItem(‘nowRequirePageData’));
Object.keys(this.searchForm).forEach((key) => {
this.searchForm[key] = searchConditon[key] || this.searchForm[key];
});
// 数据拿取之后，清除缓存
sessionStorage.removeItem(‘nowRequirePageData’);
// 搜索操作
}else {
// 没有搜索参数
初始化
}
}