vue keep-alive

keep-alive缓存

    H组件
  <router-link></router-link>
  <keep-alive>
    <router-view  v-if="$route.meta.keepAlive"></router-view>
    <!--需要缓存的组件-->
  </keep-alive>
  <router-view  v-if="!$route.meta.keepAlive"></router-view>
  <!--不需要缓存的组件-->
  
  
  在router的index.js中
  {
    path:'/A',
    component: require('../components/A.vue'),
    meta:{
      keepAlive:true  //添加meta  A组件keepAlive为true 被缓存
    }
  }
  
  
  A组件跳转到B组件  从B组件返回A组件 A组件的数据状态不刷新(使用缓存的页面)
  
  在A组件中
  
   beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      next();
    },
    
    
    在B组件中

    beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      if (to.path == "/A") {
        to.meta.keepAlive = true;
      } else {
        to.meta.keepAlive = false;
      }
      next();
    },