vue路由keep-alive缓存的删除与自定义页面的缓存方式

使用于仿swagger的tabs分页同时跳转页面不刷新，关闭顶部tab然后删除缓存页面进行重新加载的场景。
路由设置，路由name需要和页面里面name一致，方便之后进行页面缓存数据的删除，同时添加keepAlive属性，来判断这个页面是否需要进行缓存，因为有的比如大屏展示的页面在业务中是不进行缓存操作的。

  {
    name: 'alltasking',
    path: 'alltasking',
    component: () => import('@ecs/pages/location/all-tasking'),
    meta: {
      name: '一键盘点',
      isNoPermission: false,
      keepAlive: true
    }
  },

router-view设置白名单，两个路由进行切换，在上层设置v-if然后在切换时使用$nextTick进行页面刷新，不影响视觉。

 <Content
            v-if="isRouterAlive"
            class="center-con page-content-center"
          >
            <keep-alive :exclude="whiteList">
              <router-view v-if="($route.meta.keepAlive)" />
            </keep-alive>
            <router-view v-if="!($route.meta.keepAlive)" />
          </Content>

最后全局混入，在路由跳转页面进行查看是否需要进行删除缓存或者是否存在缓存。

Vue.mixin({
  beforeRouteLeave: function(to, from, next) { // 增加离开路由时清除keep-alive
    if (from.name != "login" && to.name != "login") { //如果是初始登录和退出不进行清除缓存操作
      if (store.state.main.isAliveOk == false) { //在之前页面进行判断，如果即将跳转的页面在如果已经在顶部tab标签中，将判断结果存在vuex中，如果存在进行下一步操作
        console.log(this.$vnode, "1")
        if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance
          .cache) {
          // console.log(this.$vnode.parent, "21")
          if (this.$vnode.componentOptions) {
            var mykey; //命名一个空的mykey 值，下面从cache 本地缓存到的列表中查找即将跳转到的页面，然后进行操作
            var cache = this.$vnode.parent.componentInstance.cache; //已经缓存的地址
            var keys = this.$vnode.parent.componentInstance.keys; //已经缓存的key的数组
            // console.log(cache, keys, "3")
            $.each(cache, function(key, val) { //cache 是个object 类型对象，循环对象，查看下一个页面的name是否存在keep-alive中
              // console.log(cache[key].componentOptions.Ctor.extendOptions.name,to.name)
              if (cache[key].componentOptions.Ctor.extendOptions.name == to.name) {
                // console.log(key,"zhya")
                mykey = key //如果有将mykey进行赋值，查看他的对象的名
              }
            });
            if (cache[mykey]) { //如果本地存在进行删除
          
              if (keys.length) {
                var index = keys.indexOf(mykey);
                if (index > -1) {
                  keys.splice(index, 1);
                }
              }
              delete cache[mykey]; //如果本地存在进行删除
            }
            // console.log(cache, keys, mykey, "4")
          }

        }

      }
      next();
    } else {
      next();
    }
  }
});```
tabs数据页面建议存sessionStorage中，这样页面刷新，页面跳转就不会进行丢失，也可以和vuex进行数据同步，但是没必要，看实际项目操作