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全局关闭和部分关闭问题。

相关推荐
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷4 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
苹果酱05675 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.5 小时前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding6 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥6 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信6 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩6 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
凉豆菌7 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司7 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui