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配置多代理服务接口地址操作
这篇文章主要介绍了vue配置多代理服务接口地址操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
在vue项目实现一个ctrl+f的搜索功能
刚刚接到领导通知，需要实现搜索功能，因为项目是vue的而且是手机端，对我来说有点小难度。经过小编的一番思索最终还是解决了，今天小编把实现过程分享到脚本之家平台，需要的朋友参考下
2020-02-02
详解如何用VUE写一个多用模态框组件模版
这篇文章主要介绍了详解如何用VUE写一个多用模态框组件模版，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue3使用自定义指令实现el dialog拖拽功能示例详解
这篇文章主要为大家介绍了vue3使用自定义指令实现el dialog拖拽功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue对插件(iview,elementui,treeselect)样式的局部修改方式
这篇文章主要介绍了vue对插件(iview,elementui,treeselect)样式的局部修改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
这篇文章主要给大家介绍了基于Vue 2.0+Vue-router构建了一个简单的单页应用，文中通过实例介绍的非常详细，并在文末给出了源码下载，需要的朋友可以下载学习参考，下面来一起看看吧。
2017-03-03
vue+element-ui中form输入框无法输入问题的解决方法
很多初次接触element-ui的同学,在用到element form组件时可能会遇到input框无法输入文字的问题,下面这篇文章主要给大家介绍了关于vue+element-ui中form输入框无法输入问题的解决方法,需要的朋友可以参考下
2023-04-04
Map.vue基于百度地图组件重构笔记分享
这篇文章主要为大家分享了Map.vue基于百度地图组件重构笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
vue模板语法-插值详解
这篇文章主要介绍了vue模板语法-插值，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-03-03
vue-test-utils初使用详解
这篇文章主要介绍了vue-test-utils初使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05