用vue做后台管理项目，特别是有列表页、列表数据详情页、列表数据修改页功能的码友们，几乎都被vue前进后退都刷新的逻辑坑过，有时候需要保存组件状态,
要求 :

10年的平山网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整平山建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“平山网站设计”,“平山网站推广”以来，每个客户项目都认真落实执行。

1.列表页进入详情页返回列表页时列表不能刷新，连页数、筛选条件等都不能变

2.列表页进列表数据编辑页若数据有改动返回列表页列表数据得刷新，但页数、筛选条件等都不能变

3.非详情页、编辑页进入列表页时列表数据得刷新，页数、筛选条件等都全部重置

总结一下就是‘这个列表页我想让它刷新，他就得刷新，不想让他刷，他就无变化

那么是啥呢?对,是keep-alive组件，对，是它。

但单纯的keep-alive是前进后退都不会刷新的，所以需要改造一下，让它乖乖听话。这个过程需要路由路由参数meta配合我们。

1.在路由文件中为目标列表页设置meta参数，里面包含keepAlive和ifDoFresh字段

复制代码
{
path:'*',
name:'datalists',
component: resolve => require(['@/view/datalist'], resolve),
meta:{
keepAlive: true,
ifDoFresh:false
}
},

复制代码

2.在程序主入口main.vue中设置页面根据keepAlive字段判断是否使用keep-alive组件。

复制代码

复制代码
3.在目标列表页的beforeRouteEnter方法中判断页面进入方式（详情页，编辑页或其他方式），根据需求将路由参数的ifDoFresh字段设为true/false，

在页面的activated（开启了 keepAlive: true的页面在第二次进入时是无法触发mounted发法的）方法中根据ifDoFresh字段判断是否刷新页面。

复制代码
beforeRouteEnter (to, from, next) {
if(from.name!='详情页'&&from.name!='编辑页')
{
to.meta.ifDoFresh = true;
}
next();
},
activated(){
//开启了keepAlive:true后再次进入，以前的搜索条件和页数都不会变，无论什么情况都调用一下获取数据的接口，这样就能得到当前搜索条件和页数的最新数据
if(this.$route.meta.ifDoFresh){
//重置ifDoFresh
this.$route.meta.ifDoFresh = false;
//获取列表数据方法第一参数为是否重置搜索条件和页数
this.getData(true);
}else{
this.getData();
}
}
完结！

当前文章：keepAlive使用
分享路径：http://myzitong.com/article/ghpepp.html