keep-alive需求对某个页面进行缓存

本文记录一下vue2的 使用方式，进行页面分别缓存和不缓存，按需加载

keep-alive

• include数据格式:[‘a’,’b’] a页面b页面需要缓存 对应页面的name名称

  export default {
    name: "a",
  }

• keep-alive是进行路由加载缓存页面信息的;

  <keep-alive :include='keepAlive'>
      <router-view></router-view>
  </keep-alive>

• 但是有时候有的页面需要缓存，不想每次切换路由的时候在发起请求重新加载，这个涉及到我们的路由元信息
• vuex commit提交当前需要缓存的页面name名称
• histPub页面需要缓存

  this.$store.commit('SET_KEEP_ALIVE','histPub');

• vuex代码

   state: {
      keep_alive: []
   },
   mutations: {
     SET_KEEP_ALIVE: (state, keepAlive) => {
         state.keep_alive = keepAlive
     },
  }

• 当前页面缓存后跳到详情页面当前也缓存切换其余路由数据会一直缓存问题
• 判断当前页面离开的时候是否是详情页、不是的话情况缓存页面name

  beforeRouteLeave (to, from, next) {
      if(to.path !='/eventView'){
        this.$store.commit('SET_KEEP_ALIVE','');
      }
      next();
  },

赏

谢谢你请我吃糖果

支付宝

微信