玩转vue前进刷新，后退不刷新and按需刷新

带你玩转vue前进后退按需刷新！

用vue做后台管理项目，特别是有列表页、列表数据详情页、列表数据修改页功能的码友们，几乎都被vue前进后退都刷新的逻辑坑过，！

萝卜的产品经理老先生（人称老白，送外卖的进来都叫老先生

）的要求是 : 

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

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

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

并且向我甩出一个相信你行的小表情

总结一下老先生的中心思想就是‘这个列表页我想让它刷新，他就得刷新，不想让他刷，他就得待着别动，具体怎么刷我说了算’

不知如何是好的萝卜眼泪成河，啊！不，是流成一片湖

收起眼泪，撸起袖子加油干！第一版傻子式的操作就是将列表页的页数、筛选条件等在详情页和编辑页来回带。那叫一个累！并且点着点着就跑的没边了。

问了问度妈妈，知道有个keep-alive组件，对，是它，就是它，我们的小哪吒！

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

以上皆为闲扯片，可以略过，下面开始正题！！！

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

{

  path:'*',

  name:'datalist',

  component: resolve => require(['@/view/datalist'], resolve),

  meta:{

    keepAlive: true,

    ifDoFresh:false

  }

},

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

<div class="main">

    <keep-alive>

       <router-view v-if="$route.meta.keepAlive"/>

    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive"/>

</div>

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();

    }

}

 至此，完结！

加Java架构师进阶交流群获取Java工程化、高性能及分布式、高性能、深入浅出。高架构。

性能调优、Spring，MyBatis，Netty源码分析和大数据等多个知识点高级进阶干货的直播免费学习权限

都是大牛带飞 让你少走很多的弯路的 群号是： 810309655对了 小白勿进 最好是有开发经验

注：加群要求

1、具有工作经验的，面对目前流行的技术不知从何下手，需要突破技术瓶颈的可以加。

2、在公司待久了，过得很安逸，但跳槽时面试碰壁。需要在短时间内进修、跳槽拿高薪的可以加。

3、如果没有工作经验，但基础非常扎实，对java工作机制，常用设计思想，常用java开发框架掌握熟练的，可以加。

4、觉得自己很牛B，一般需求都能搞定。但是所学的知识点没有系统化，很难在技术领域继续突破的可以加。

5.阿里Java高级大牛直播讲解知识点，分享知识，多年工作经验的梳理和总结，带着大家全面、科学地建立自己的技术体系和技术认知！

作者：烛光Java后端开发
链接：https://www.jianshu.com/p/4aafb132405d