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里面把这三个路由写出来

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

这样就可以了

相关推荐
Achou.Wang12 小时前
源码分析 golang bigcache 高性能无 GC 开销的缓存设计实现
开发语言·缓存·golang
本就一无所有 何惧重新开始18 小时前
Redis技术应用
java·数据库·spring boot·redis·后端·缓存
阿巴~阿巴~20 小时前
Redis重大版本演进全解析:从2.6到7.0
服务器·数据库·redis·ubuntu·缓存·centos
ajsbxi1 天前
【Redis】缓存读/写操作流程
redis·笔记·spring·缓存·bootstrap
洲覆1 天前
基于 clangd 搭建 Redis 6.2 源码阅读与调试环境
开发语言·数据库·redis·缓存
凯子坚持 c1 天前
Redis 事务深度解析:从基础到实践
数据库·redis·缓存
zym大哥大2 天前
C++客服端访问redis
数据库·redis·缓存
赖small强2 天前
Linux内存管理-缓存系统中的Major和Minor详解
linux·缓存·交换缓存机制·major fault·minor fault
啊森要自信2 天前
【GUI自动化测试】YAML 配置文件应用:从语法解析到 Python 读写
android·python·缓存·pytest·pip·dash
小高Baby@2 天前
Redis Key的设计
数据库·redis·缓存