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如何配置根目录@(引用路径)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
关于vue中element-ui form或table lable换行的问题
这篇文章主要介绍了vue中element-ui form或table lable换行的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vuex中getters的基本用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于Vue3超详细的ref()用法的相关资料,在Vue3中ref函数不仅可以用于在组件中获取DOM元素或子组件的引用,还可以直接访问组件元素本身,需要的朋友可以参考下2023-07-07
今天小编就为大家分享一篇vue slots 组件的组合/分发实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue-i18n实现中英文切换的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要为大家介绍了解决threeJS加载obj gltf模型后颜色太暗的方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了vue封装图片滑块验证组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
目前前端最流行的网络请求库还是axios,所以对axios的封装很有必要,下面这篇文章主要给大家介绍了关于vue3中封装Axios请求及在组件中使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
最新评论