在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");

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