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

无知好快_Sosoo浪浪2024-04-19 9:48

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