在web项目中,我们时常会遇到在列表中,从某页点击查看后,再次返回列表页,列表页面就刷新回第一页,由于再次返回列表页面,代码会重新进入生命周期
所以我们这个时候需要用到keep-alive,对列表页面进行缓存,下面是代码

//缓存需要的页面,通过路由名字来进行判断哪些页面需要缓存
   <keep-alive :include="cacheList" :max="5">
        <router-view class="container" />
      </keep-alive>
      
export default class Layout extends Vue {
  mounted() {
    window.vm = this;
  }
  //需要缓存的页面名
  cacheList = [
    "ActivitiesIndex",
  ];
}

当前这个时候就会有一种特殊情况,如过你已经实现了上面代码,成功进行了缓存,但是如果这个时候你再次点击左侧菜单栏跳转到别的页面,再次回来,页面还是会停留在刚刚你缓存的页面
所以这个时候我们需要重制刚刚缓存的页面,也就是刚刚缓存的列表
下面是该种情况的代码

需注意:进入组件之前未被实例化,无法直接访问this

  beforeRouteEnter(to: RouteConfig, from: RouteConfig, next: Function): void {
    const name: any = from.name;
    // 进入组件之前未被实例化,无法直接访问this
    next((vm: any) => {
      const list = new Set(["ReleaseManagement"]);
      const need_cache: boolean = list.has(name);
      if (!need_cache) {
      //如果不是需要缓存的页面,则进行重置列表,取消缓存,resetCondition()是重置列表,重新请求列表接口的方法
        vm.resetCondition();
      }
    });
  }

一般的缓存问题上诉就可以满足了,但是最近开发的过程中遇到了另一种情况,就是当你编辑列表中某一页的某一列消息的时候,需求是, 进入新的编辑页面编辑成功后反悔列表页,页面页不刷新,并且更新编辑的那列数据
目前我们项目中现在的解决办法是:
跟后端协调,在编辑成功后,后端接口返回编辑的那条列表的全部数据,前端拿到数据后存储到本地,进行整列替换

   if (sessionStorage.getItem("ConfigurationRecordEdit")) {
          let tableItem: any = sessionStorage.getItem(
            "ConfigurationRecordEdit"
          );
          //编辑成功后对列表需要数据进行替换
          if (tableItem) {
            tableItem = JSON.parse(tableItem);
            console.log(tableItem);
            for (let i = 0; i < vm.tableData.length; i++) {
              if (vm.tableData[i].id == tableItem.id) {
                vm.tableData[i] = tableItem;
                break;
              }
              //对编辑成功后生成新数据的一种情况的处理(此处是因为本项目中编辑会产生新数据的情况,所以特殊处理了一下)
              const rowData = new Set([tableItem.id]);
              const rowDataBoolean = rowData.has(vm.tableData[i]);
              console.log(rowDataBoolean, "rowDataBoolean");
              if (!rowDataBoolean) {
                 //回到第一页
                //调取列表接口
                vm.getConfigurationRecordList();
                return;
              }
            }
            //更新列表,否则试图不更新
            vm.tableData = [...vm.tableData];
          }
          //即使清除缓存在本地的数据
          sessionStorage.removeItem("ConfigurationRecordEdit");

今天的记录就到这里啦,小小程序媛,有不好的地方欢迎大家指出,共同进步!!!

Logo

前往低代码交流专区

更多推荐