bus使用清除keepalive缓存

javascript 复制代码
<template>
  <div id="app">
    <!-- <keep-alive>
      <router-view v-if="$route.meta.noCache"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.noCache"></router-view> -->

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" :key="fullPath"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  computed: {
    fullPath() {
      // console.log(this.$route.fullPath);
      return this.$route.fullPath
    }
  },
  mounted() {
    // 注册监听全局的clearKeepAlive方法,可在其他组件中触发此方法
    this.$bus.$on('clearKeepAlive', this.clearKeepAlive)

    // 使用
    // this.$bus.emit("clearKeepAlive", path); // 清除缓存
  },
  methods: {
    // 根据fullUrl清除keepAlive
    clearKeepAlive(fullUrl) {
      // console.log('bus触发要清除的keepAlive', fullUrl);
      this.$children.forEach((item) => {
        if (item.$vnode.data.key == fullUrl) {
          console.log(item.$vnode.data.key)
          this._myDestory(item)
        }
      })
    },
    // 封装清除某个组件的keepAlive状态,并销毁
    _myDestory(keepAliveComponent) {
      // 你可以根据自己的业务更改此处的判断逻辑,酌情决定是否摧毁本层缓存。
      if (keepAliveComponent.$vnode && keepAliveComponent.$vnode.data.keepAlive) {
        if (
          keepAliveComponent.$vnode.parent &&
          keepAliveComponent.$vnode.parent.componentInstance &&
          keepAliveComponent.$vnode.parent.componentInstance.cache
        ) {
          if (keepAliveComponent.$vnode.componentOptions) {
            var key =
              keepAliveComponent.$vnode.key == null
                ? keepAliveComponent.$vnode.componentOptions.Ctor.cid +
                  (keepAliveComponent.$vnode.componentOptions.tag
                    ? `::${keepAliveComponent.$vnode.componentOptions.tag}`
                    : '')
                : keepAliveComponent.$vnode.key
            var cache = keepAliveComponent.$vnode.parent.componentInstance.cache
            var keys = keepAliveComponent.$vnode.parent.componentInstance.keys
            if (cache[key]) {
              if (keys.length) {
                var index = keys.indexOf(key)
                if (index > -1) {
                  keys.splice(index, 1)
                }
              }
              delete cache[key]
            }
          }
        }
      }
      keepAliveComponent.$destroy()
    },
    reload() {
      this.ifRouterAlive = false
      this.$nextTick(() => {
        this.ifRouterAlive = true
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
相关推荐
棒棒的唐8 小时前
Avue2图片上传使用object对象模式时,axios的请求模式用post还是get?
开发语言·前端·javascript·avue
OnlyEasyCode8 小时前
Linux部署Nginx前后端web教程
linux·前端·nginx
梵得儿SHI8 小时前
Vue Router 路由管理从入门到精通:基础、导航与参数传递实战(含避坑指南)
前端·javascript·vue.js·路由基础配置·版本适配·路由实例创建·路由规则定义
IT_陈寒8 小时前
JavaScript 性能优化实战:7 个让你的应用提速 50%+ 的 V8 引擎技巧
前端·人工智能·后端
Watermelo6178 小时前
【前端实战】Axios 错误处理的设计与进阶封装,实现网络层面的数据与状态解耦
前端·javascript·网络·vue.js·网络协议·性能优化·用户体验
不一样的少年_8 小时前
【性能监控】别只做工具人了!手把手带你写一个前端性能检测SDK
前端·javascript·监控
开发者小天8 小时前
react中使用复制的功能
前端·javascript·react.js
AI炼金师8 小时前
Chrome 中的 Claude 入门指南
前端·chrome
德迅云安全—珍珍8 小时前
2025 年 Chrome 浏览器 0Day 漏洞全面分析:八大高危漏洞遭利用
前端·chrome
子洋8 小时前
AI Agent 设计模式 - ReAct 模式
前端·人工智能·后端