先给一种原始的方法sessionStorage或者localStorage
先说一下实现原理:
比如分页,你从第2页进入详情页
返回为了方便用户体验,肯定最好能回到当前这一页
我用的分页是elementui的分页,可以在分页切换的时候把页码缓存下来
handleCurrentChange(val){ this.listQuery.pageNo=val; sessionStorage.setItem('currentPage',this.listQuery.pageNo);//重点在这里 this.getSchoolWebModuleMessageListFunc(); },
你进入详情页的时候或者编辑页的时候你可以给一个标识,可以相同例如
sessionStorage.setItem("detail",true);
然后你进入列表(就是有分页的那个页面)
if(sessionStorage.getItem('detail')){ //上面这个就是去到详情页或者编辑页的标识//
//如果有这个就读取缓存里面的数据
this.listQuery.pageNo=Number(sessionStorage.getItem("currentPage"));
}else{
this.listQuery.pageNo=1;
//这个主要是从其他页面第一次进入列表页,清掉缓存里面的数据
sessionStorage.removeItem("currentPage");
}
其实还有一个bug就是你已经跑过详情页,浏览器缓存里面已经有detail,你从其他页面再次想第一次那样进入,你本身应该不需要缓存里面的数据
你可以在离开列表页面的时候去掉detail,如下:
destroyed(){ sessionStorage.removeItem("detail"); },
方法二keep-alive
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> /*这个是在template里面设置,如果路由meta挂载keppAlive说明页面需要缓存,不挂载就是不需要*/
{ path:'', name:'', component:() => import(''), meta:{ keepAlive:true },//路由meta(meta也可以挂载静态权限例如meta: { permissionPath: '权限路由' })
//使用起来其实也很简单,你只要了解keepalive里它有两个生命周期: activated: keep-alive组件激活时调用 deactivated: keep-alive组件停用时调用 在借助守卫钩子beforeRouteLeave就行了
mounted(){ if(!this.$route.meta.keepAlive){ //这是页面不要缓存的情况进入,接下来就是你自己的逻辑 } }, activated(){ if(this.$route.meta.keepAlive){ //这是页面缓存的情况进入,接下来就是你自己的逻辑 } } , beforeRouteLeave(to, from, next) { if(to.//你到哪些页面要缓存,哪些不需要缓存自己写){ from.meta.keepAlive=true; next(); }else{ from.meta.keepAlive=false; this.$destroy(); next(); } }
补充一个elementui表格新版本存在的一个bug
就是分页的临界点删除的时候,比如第4页就一条信息,删除的时候他并不会自动请求第3页,而是继续传第4页过去导致查询回来的数据为空
你可以在表格数据的这个函数里面加下面这一段
this.messageTable=data.data.dataList; /**/ if(this.messageTable.length==0&&this.listQuery.pageNo!==1){ this.listQuery.pageNo--; //如果长度为空,且不是第一页,那就让他页码自动减1,回调本函数 this.getSchoolWebModuleMessageListFunc(); } /**/主要是注释里面的代码, this.total=data.data.pagination.total; this.listLoading=false;
日常所遇,随手而记。