keep-alive缓存三级及三级以上路由

需求需要缓存这个出入记录,当tab切换时不重新加载,当刷新页面时,或把这个关闭在重新打开时重新加载如图:

(我这里用的是芋道源码的前端框架)

keep-alive

1、include 包含页面组件name的这些组件页面,会被缓存起来

2、exclude 除了这些name以外的页面组件,会被缓存起来

3、没有include或者exclude属性,表示所有的路由组件都会被缓存起来

复制代码
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews" exclude="redirect">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

解决方法

现在router里面的index.js里面把这三个路由写出来

然后在仓库里面手动把二级路由加上

这样就可以了

相关推荐
失散131 小时前
分布式专题——6 Redis缓存设计与性能优化
java·redis·分布式·缓存·架构
瑜伽娃娃2 小时前
基于Redis设计一个高可用的缓存
数据库·redis·缓存
ChinaRainbowSea10 小时前
7. LangChain4j + 记忆缓存详细说明
java·数据库·redis·后端·缓存·langchain·ai编程
失散1315 小时前
分布式专题——5 大厂Redis高并发缓存架构实战与性能优化
java·redis·分布式·缓存·架构
十八旬17 小时前
苍穹外卖项目实战(day7-1)-缓存菜品和缓存套餐功能-记录实战教程、问题的解决方法以及完整代码
java·数据库·spring boot·redis·缓存·spring cache
MAGICIAN...21 小时前
【Redis五种数据类型】
数据库·redis·缓存
酷ku的森1 天前
Redis中的Zset数据类型
数据库·redis·缓存
利刃大大1 天前
【高并发内存池】五、页缓存的设计
c++·缓存·项目·内存池
Heliotrope_Sun1 天前
Redis
数据库·redis·缓存