vue项目实现路由跳转到新页面,返回旧页面,保留之前的数据记录(操作代码)
作者：哼唧怪~
这篇文章主要介绍了vue项目实现路由跳转到新页面，返回旧页面，保留之前的数据记录,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
以项目里某个页面为示例。
// 页面相关参数示例
searchParams: {
projectName: '',// 筛选搜索框参数
handlerOrgId: '',// 左侧树点击参数
pageNum:JSON.parse(sessionStorage.getItem('nowPageData'))?.pageNum || 1,// 页码参数
},在相关操作路由跳转时，对当前页面的参数进行一个存放处理，此示例将数据放在 Session Storage 里面。
// 操作示例：数据包含点击的树节点，筛选框的参数，以及选中的列表页码
jumpToFormFn(type, id) {
let _data = Object.assign(this.searchParams, {});/
sessionStorage.setItem('nowPageData', JSON.stringify(_data));/这两行代码用来往 sessionStorage存数据
this.$router.push({
path: 'fieldFundsForm',
query: {
type,
id,
},
});
},返回旧页面时，判断Session Storage 里面是否含有当前页面的参数缓存
如果有数据缓存，在页面创建时将参数赋值给页面的参数，
let _obj = JSON.parse(sessionStorage.getItem('nowPageData'));
Object.keys(this.searchParams).forEach((key) => {
this.searchParams[key] = _obj[key] || this.searchParams[key];
this.currentCHeckedId = this.searchParams.handlerOrgId; // 本次示例左侧树需要高亮选中，其他操作也是如此，
// 存放数据，在掉对应树接口之后，设置高亮选中或者勾选即可
});
## 数据存放之后，清除缓存
sessionStorage.removeItem('nowPageData');如果列表组件有相应封装的需要对应修改一下，组件里当前页数 currentPage:
// 如果this.searchParams.pageNum有值，就取这个值，要么就取默认值
到此这篇关于vue项目实现路由跳转到新页面，返回旧页面，保留之前的数据记录的文章就介绍到这了,更多相关vue路由跳转到新页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！