vue项目实现路由跳转到新页面,返回旧页面,保留之前的数据记录(操作代码)
更新时间：2023年09月06日 11:40:37 作者：哼唧怪~
这篇文章主要介绍了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路由跳转到新页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要记录了亲自动手实现vue日历控件的详细过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
MVVM是Model-View-ViewModel的缩写，MVVM是一种设计思想，这篇文章主要介绍了Vue生命周期和MVVM框架,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
在 Vue 3 中上传 KML 文件并在地图上显示的实现方法
KML 文件作为一种标准的地理数据格式,广泛应用于地理信息系统（GIS）中,通过 OpenLayers 和 Vue 3 的组合,您可以方便地实现地图数据的可视化和交互,本文介绍在 Vue 3 中上传 KML 文件并在地图上显示的实现方法,感兴趣的朋友一起看看吧2024-12-12
el-form resetFields无效和validate无效的可能原因及解决方法
本文主要介绍了el-form resetFields无效和validate无效的可能原因及解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家详细介绍了Vue.js实现多条件筛选、搜索、排序及分页的表格功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了Vue.js之VNode的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
vue cli 3.0下配置开发环境下的sourcemap问题
这篇文章主要介绍了vue cli 3.0下配置开发环境下的sourcemap问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要为大家介绍了功能强大的vue.js拖拽组件安装应用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
这篇文章主要介绍了vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue前后端分离如何解决每次请求session都会变的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论