Vue框架的keep-alive 缓存机制

利用Vue的keep-alive 缓存机制实现页面 "前进刷新，后退不刷新"效果

1. 在 router 中将需要不刷新的页面 加上meta属性

 {
      path: '/index',
      component: index,
      meta: {
        keepAlive: true,
        isBack: false,
      }
  },

2. 在 App.vue中 将需要缓存的页面加以判断

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

3. 在index页面中添加路由守卫beforeRouteEnter 中判断当前页面是否为要缓存的页面

 beforeRouteEnter(to, from, next) {
    // to: 为当前页面路由
    // from: 为从那一个页面跳转过来的路由
    if(to.name=='index '){
    // 意思为，如果to的路由为 当前需要缓存页面的路由，就为 true,  需要缓存，即不刷新，false就不需要缓存，即刷新
        to.meta.isBack=true;
    }
    next();
  },

4. keep-alive开始后，会多出 activated 和deactivated 两个钩子函数，切记 如果没开启 keep-alive 是不会执行这两个钩子函数的。利用activated钩子特性，将不需要缓存的页面关闭，即可实现前进刷新，后退不刷新

 activated() {
     this.$route.meta.isBack=false
  },

所以我的代码为

// router
 {
      path: '/index',
      component: index,
      meta: {
        keepAlive: true,
        isBack: false,
      }
  },

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

// index页面
 beforeRouteEnter(to, from, next) {
    if(to.name=='index'){
        to.meta.isBack=true;
    }
    next();
  },
   activated() {
     this.$route.meta.isBack=false
  },

• 需要特别注意的是：使用keep-alive和不使用keep-alive，生命周期钩子函数执行流程不一样。

关于keep-alive 的生命周期钩子函数

• 不使用keep-alive

  => 就是正常的生命周期钩子函数
  => created – mounted – updated – destroyed

• 使用keep-alive但没有缓存页面的时候

  => beforeRouteEnter – created – mounted – activated – deactivated
  // updated钩子函数也可以正常使用，数据改变时会继续触发updated
  // beforeDestroy，destroyed 钩子函数将不执行 由deactivated钩子函数替代，如有销毁的实例可以放在 deactivated 钩子

• 使用keep-alive缓存页面的时候
  => beforeRouteEnter – activated – deactivated

Ps: 以上都是总结得出，可能会出现错误。请谨慎用之
 
 
// 一个月薪2500的狗头，只能记录+分享它的狗生了…