vue 页面全缓存 编辑成功的页面保存后清除上次未保存页面缓存 删除同一页面特定判断下缓存

//vue后台管理系统添加tab栏标签页
<div class="tags-box">
        <div class="tags" v-for="(item, index) in pathList" :key="index":class="{ 'active': !item.saleName ? item.path === $route.path : item.path === $route.path && item.saleName === $route.query.saleName  }"
          @click="tabsHandle($event, item.path, item.query, item)"
          @contextmenu.prevent.stop="rightClick($event, item.path, item.saleName, item)">
          <div v-show="item.saleName">{{ item.saleName }} - </div>
          
          <div>{{ item.name }}</div>
          <i class="el-icon-close" @click.prevent.stop="closeSelectedTag(item.path, item.query, item)"></i>
          <ul
            v-show="visible && (path === item.path && (item.saleName ? item.saleName === $route.query.saleName : 1))">
            <li>关闭其他</li>
          </ul>
        </div>
      </div>
      <el-main id="el-main" ref="currRoutePage">
        <keep-alive>
          <router-view :key="fullPath" />
        </keep-alive>
      </el-main>

computed: {
    fullPath() {
      return this.$route.fullPath
    },
    pathList: {
      get() {
        return this.$store.state.pathList;
      },
      set(value) {
       return this.$store.state.pathList = value
      }
    }

  },
  watch: {
    $route(to, from) {
   
      if (Object.keys(to.query) == 0) {
        that.checkPathList(to.path, to.name)
      } else {
        that.$nextTick(() => {
          that.checkPathList(to.path, to.name, 	to.query)
        })
      }
    },
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },

  },
   closeSelectedTag(path, query, item) {
      this.closeTagList(path, query, item)
    },
    //单个删除tab
    closeTagList(path, query, item) {
      Bus.$emit("clearKeepAlive", item.fullPath); // 清除缓存
      let closedTagListArr = JSON.parse(localStorage.getItem('closedTagList')) || []
      let index
      if (item.saleName) {
        index = this.pathList.findIndex(ite => ite.path == path && ite.saleName == item.saleName)
      } else {
        index = this.pathList.findIndex(item => item.path == path)
      }
      if (this.pathList.length <= 1) return
      closedTagListArr.push(item.path)
      //导航栏菜单去重
      closedTagListArr = [...new Set(closedTagListArr)]
      localStorage.setItem('closedTagList', JSON.stringify(closedTagListArr))
      this.pathList.splice(index, 1)
      if (this.$route.path === path) {
        if (index === 0) {
          this.$router.push(this.pathList[this.pathList.length - 1])
        } else {
          this.$router.push(this.pathList[index - 1])
        }
      }
      localStorage.setItem('userRouter', JSON.stringify(this.pathList))
    },
    tabsHandle(e, path, query, item) {
      if (e.target.nodeName === 'DIV') {
        this.$router.push({
          path,
          query,
        })
      } else if (e.target.nodeName === 'I') {
      //关闭标签栏操作
        this.closeTagList(path, query, item)
      } else {
        //tab栏关闭其他操作
        let closedTagListArr = JSON.parse(localStorage.getItem('closedTagList')) || []
        this.pathList.forEach(ite => {
          if (ite.path != path) {
            closedTagListArr.push(ite.path)
          }
        })
        closedTagListArr = [...new Set(closedTagListArr)]
        localStorage.setItem('closedTagList', JSON.stringify(closedTagListArr))
        if (item.saleName) {
          this.pathList = this.pathList.filter(item => item.path === path && item.saleName === this.$route.query.saleName )
        } else {
          this.pathList = this.pathList.filter(item => (item.path === path))
        }
        this.otherFlag = false
        this.$router.push({
          path,
          query,
        })
        localStorage.setItem('userRouter', JSON.stringify([item]))

      }


    },
    rightClick(e, path, saleName, item) {

      if (e.target.nodeName === 'DIV') {
        this.otherFlag = true
        this.path = path
      }
      this.visible = true
      if (this.pathList.length == 1) {
        this.visible = false
      }
    },
    checkPathList(path, name, query) {
      if (this.pathList.length >= 10) {
        this.pathList.shift();
      }
      if ((this.pathList.findIndex(item => item.path == path)) === -1) {
        this.pathList.push({
          path,
          name: query ?.name ||  '',
          saleName: query ?.saleName || '',
          query,
          fullPath: this.fullPath

        })
      }
      if (query) {
        if (this.pathList.findIndex(item => item.saleName == query.saleName && item.path == path ) === -1) {
          this.pathList.push({
            path,
            name: query ?.name || '',
            saleName: query ?.saleName || '',
            query,
            fullPath: this.fullPath
          })
        }
      }
      localStorage.setItem('userRouter', JSON.stringify(this.pathList))
    },

    // 根据fullUrl清除keepAlive
    clearKeepAlive(fullUrl) {
      if (this.$refs.currRoutePage) {
        this.$refs.currRoutePage.$children.forEach((item) => {
          if (item.$vnode.data.key == fullUrl) {
            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();
    }

//bus文件
import Vue from 'vue'
const bus = new Vue()
export default bus

//main.js
Vue.mixin({
  beforeRouteLeave(to, from, next) {
    //判断是否摧毁本层缓存
    //编辑页面调取保存接口 成功后增加判断 从而实现同一页面 特定场景下是否清楚缓存
    if (to.path == '/salesContract' && localStorage.getItem('isCache') == 'true' ) {
      if (this.$vnode && this.$vnode.data.keepAlive && !from.query.id) {
        if (this.$vnode.parent.parent.parent && this.$vnode.parent.parent.parent.componentInstance && this.$vnode.parent.parent.parent.componentInstance.cache) {
          if (this.$vnode.componentOptions) {
            var key = this.$vnode.parent.parent.key == null
              ? this.$vnode.parent.parent.componentOptions.Ctor.cid +
              (this.$vnode.parent.parent.componentOptions.tag ? `::${this.$vnode.parent.parent.componentOptions.tag}`
                : '')
              : this.$vnode.parent.parent.key;
            var cache = this.$vnode.parent.parent.parent.componentInstance.cache;
            var keys = this.$vnode.parent.parent.parent.componentInstance.keys;
            if (cache[key]) {
              if (keys.length) {
                var index = keys.indexOf(key);
                if (index > -1) {
                  keys.splice(index, 1);
                }
              }
              delete cache[key];
            }
          }
        }
      }
      this.$destroy();
    }
    next();
  },
})