Vue-admin-template关于TagView缓存问题

方式1:采用原有的

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

    <!-- :include='/componentA|componentB' 正则写法 -->
    <!-- :include="['componentA','componentB']" 数组写法 -->
    <!-- <keep-alive :include="keepAliveComponents">
      <router-view />
    </keep-alive> -->
  </section>
</template>

后端通过 :meta中noCache字段 来决定是否执行缓存。

注意:路由Name和组件中Name要相同。

方式2:采用观察者

复制代码
  watch: {
    $route: {
      // 监听路由变化
      handler(to, from) {
        if (to.meta.keepAlive) {
          // 不重复增加
          if (!this.keepAliveComponents.includes(to.name)) {
            this.keepAliveComponents.push(to.name)
          }
        } else {
          //
        }
      },
      immediate: true // 开启立即监听
    }
  }
}

关键点在于 keepAliveComponents 需要处理TagView全局关闭和部分关闭问题。

相关推荐
ElasticPDF-新国产PDF编辑器9 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin10 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌11 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光11 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs11 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石11 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking13 小时前
解决 axios get请求瞎转义问题
vue.js
向阳25613 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特13 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~13 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习