vue keep-alive 在列表页、详情页、编辑页之间的跳转

一、解释：

列表页( list )： 比如订单列表， 可以是按时间倒序的列表、也可能是根据一些条件查询出的一页订单数据

详情页( view )： 只读的，仅仅用来查看一下详情的页面

编辑页( detail )： 可以对对象整体或者部分进行修改的页面

二、需求：

1. 列表页( list ) 进入详情页( view )，再返回列表页( list )时，列表页( list )不能刷新，连页数、筛选条件等都不能变，完全保持原样

2. 列表页( list ) 进入编辑页( detail )后，若数据有改动，返回列表页( list ) 时，刷新该条数据，但页数、筛选条件等都不能变

3. 其他非详情页、编辑页进入该列表页时

   a)有一些情况，需要列表数据刷新，页数、筛选条件等都全部重置

   b)有一些情况，不需要列表数据刷新，完全保持之前的样子

---

三、使用keep-alive后，组件的生命周期执行顺序

第一次进入keep-alive组件时，其生命周期执行顺序：

前一个组件中的beforeRouteLeave --> 全局beforeEach --> 将到达组件的 beforeRouteEnter --> created --> mounted --> activated  

非首次进入时，其生命周期执行顺序：

前一个组件中的beforeRouteLeave --> 全局beforeEach --> 将到达组件的 beforeRouteEnter -->activated 

四、实现步骤

1、路由定义，加上meta, 比如：

{
    path:'*',
    name:'datalist',
    component:  resolve => require(['@/view/datalist'], resolve),
    meta:{
        keepAlive: true,   //是否使用keep-alive
        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方法中，根据from.name识别上一个组件， 根据来源的不同，将ifDoFresh字段设为true/false，

beforeRouteEnter (to, from, next) {
    if(from.name!='详情页'&&from.name!='编辑页')
    { 
        to.meta.ifDoFresh = true; 
    } 
    next(); 
},

4、在组件的activated方法中根据ifDoFresh字段判断是否刷新页面。

activated(){  
  if(this.$route.meta.ifDoFresh){
        this.$route.meta.ifDoFresh = false;//重置ifDoFresh
        //执行刷新操作 
  }
}