keepalive路由缓存实现前进刷新后退缓存

1.在app.vue中配置全局的keepalive并用includes指定要缓存的组件路由name名字数组

javascript 复制代码
<keep-alive :include="keepCachedViews">
      <router-view />
    </keep-alive>

computed: {
    keepCachedViews() {
      console.log('this.$store.getters.keepCachedViews', this.$store.getters.keepCachedViews)
      return this.$store.getters.keepCachedViews
    }
  },

2.在vuex中/store/module存储要缓存的组件路由数组

javascript 复制代码
state: {
    keepCachedViews: []
  },
mutations: {
//增加方法
    UPDATE_KEEPCACHEDVIEWS: (state, view) => {
      console.log('增加缓存------', view)
      if (state.keepCachedViews.includes(view.name)) return
      if (!view.meta.noCache) {
        state.keepCachedViews.push(view.name)
      }
    },
//删除方法
    DELET_KEEPCACHEDVIEWS: (state, view) => {
      console.log('删除缓存------', view)
      const index = state.keepCachedViews.indexOf(view.name)
      index > -1 && state.keepCachedViews.splice(index, 1)
    },
},
actions: {
    updateKeepcachedViews({ commit }, views) {
      commit('UPDATE_KEEPCACHEDVIEWS', views)
    },
    deleteKeepcachedViews({ commit }, views) {
      commit('DELET_KEEPCACHEDVIEWS', views)
    },
}

3.在vuex getter.js中获取keepCachedViews

javascript 复制代码
export default {
  keepCachedViews: state => state.ibps.app.keepCachedViews// 缓存的组件
}

4.在组件内守卫中判断什么时候缓存该组件

注意:路由离开时再添加缓存不生效 ,所以我想到的解决办法是在进入要缓存的页面前,先默认将页面添加到缓存数组中,在离开时再判断是否要缓存这个组件

ps:路由前置守卫中没有this,所以要用vm

javascript 复制代码
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$store.dispatch('ibps/app/updateKeepcachedViews', to)
      return true
    })
  },
  beforeRouteLeave(to, from, next) {
    if (to.name != 'ylnlDataTemplateList') {
      this.$store.dispatch('ibps/app/deleteKeepcachedViews', from)
    }
    next()
  },

注意:路由中的name和组件的name要一致

相关推荐
材料苦逼不会梦到计算机白富美13 小时前
golang分布式缓存项目 Day 1
分布式·缓存·golang
Java 第一深情13 小时前
高性能分布式缓存Redis-数据管理与性能提升之道
redis·分布式·缓存
HBryce2414 小时前
缓存-基础概念
java·缓存
想要打 Acm 的小周同学呀21 小时前
LRU缓存算法
java·算法·缓存
hlsd#21 小时前
go 集成go-redis 缓存操作
redis·缓存·golang
镰刀出海21 小时前
Recyclerview缓存原理
java·开发语言·缓存·recyclerview·android面试
奶糖趣多多1 天前
Redis知识点
数据库·redis·缓存
CoderIsArt1 天前
Redis的三种模式:主从模式,哨兵与集群模式
数据库·redis·缓存
ketil271 天前
Redis - String 字符串
数据库·redis·缓存
生命几十年3万天1 天前
redis时间优化
数据库·redis·缓存