介绍

keep-alive是vue2.x提供的组件，用来缓存组件，避免多次加载组件来减少性能消耗。

使用

keep-alive可以配合路由的meta属性添加对应参数来判断是否缓存组件。使用例子:

  // router.js 部分
  {
    path:'/list',
    name:'list',
    meta:{
        keepAlive:true
    }
  }
  // app.vue 部分
  <keep-alive>
    <router-view v-if="$router.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$router.meta.keepAlive"></router-view>

按照以上方式，被缓存的组件就会在keep-alive组件中视图中展示，路由中，meta没有设置keepAlive或者keepLive为false的，就在显示keep-alive组件外的视图中。不会被缓存。

应用场景

列表页面A，可以下拉加载，当我下拉到对应列时，点击该列，进入详情B页面，再从详情B页面返回列表页面A，需回到我才下拉时的对应列表。再冲列表页面A进入新增列表页面C，新增一条列表，返回列表页面A刷新，获取最新的新增数据。

实现方式

缓存的写法与上面一致，不需要改动，在A页面的路由meta参数中加上keepAlive:true。

  // 页面路由定义
  {
    path:'/A',
    meta:{
      keepAlive:true,
      isBack:false
    }
  },
  {
    path:'/B',
    meta:{
    }
  },
  {
    path:'/C',
    meta:{
    }
  }
  // app.vue页面
  <keep-alive>
    // A页面会被缓存
    <router-view v-if="$router.meta.keepAlive"></router-view>
  </keep-alive>
    // B,C页面不会被缓存
  <router-view v-if="!$router.meta.keepAlive"></router-view>
  // A.vue页面监听activated钩子函数（当被keep-alive缓存组件缓存的页面，会多出两个一个钩子函数，一个activated:组件被激活时，deactivated:组件被停用时）
  activated(){
    if(!this.$router.meta.isBack){//判断返回的页面是否需要A页面进行缓存，如果不需要，就清空列表，重新请求
      this.list=[];
      this.getList()
    }
  }

  // B页面监听离开路由钩子函数,是否是从A页面过来，如果是，把A路由的meta中的isBack改成true
  beforeRouteLeave(to,from,next){
    if(from.path=='/A'){
      from.meta.isBack=true
    }
    next();
  }
  
  // C页面监听离开路由钩子函数,是否是从A页面过来，如果是，把A路由的meta中的isBack改成false
  beforeRouteLeave(to,from,next){
    if(from.path=='/A'){
        from.meta.isBack=false
    }
  }