在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;// 进入组件之前未被实例化，无法直接访问thisnext((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");
今天的记录就到这里啦，小小程序媛，有不好的地方欢迎大家指出，共同进步！！！
