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要一致

相关推荐
开航母的李大1 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
代码老y6 小时前
Redis:现代应用开发的高效内存数据存储利器
数据库·redis·缓存
zz0723207 小时前
第二十周:Redis(二)
数据库·redis·缓存
泽韦德10 小时前
【Redis】笔记|第10节|京东HotKey实现多级缓存架构
redis·笔记·缓存
麓殇⊙12 小时前
redis--黑马点评--Redisson快速入门
数据库·redis·缓存
whltaoin15 小时前
Redis专题-实战篇一-基于Session和Redis实现登录业务
redis·缓存·springboot
华清远见成都中心16 小时前
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
人工智能·缓存·语言模型
张哈大18 小时前
【 java 虚拟机知识 第一篇 】
java·开发语言·jvm·笔记·缓存
伤不起bb1 天前
Redis 哨兵模式
数据库·redis·缓存
迪迦不喝可乐1 天前
Redis 知识点一
redis·缓存