关于vue的多页面标签功能，对于嵌套router-view缓存的最终无奈解决方法

最近写我自己的后台开发框架，要弄一个多页面标签功能，之前有试过vue-element-admin的多页面，以为很完美，就按它的思路重新写了一个，但发现还是有问题的。

vue-element-admin它用的是在keep-alive组件上使用include属性，绑定$store.state.tagsView.cachedViews，当点击菜单时，往$store.state.tagsView.cachedViews添加页面的name值，在标签卡上点击关闭后就从$store.state.tagsView.cachedViews里面把缓存的name值删除掉，这样听似乎没什么问题。但它无法很好的支持无限级别的子菜单的缓存。

目前vue-element-admin官方预览地址的菜单结构大多是一级菜单分类，下面是二级子菜单。如下图所示，它只能缓存二级子菜单，三级子菜单它缓存不了。为什么会出现这个情况呢。因为嵌套router-view的问题。

 

 

 

按vue-element-admin的路由结构，它的一级菜单，其实对应的是一个layout组件，layout里面有个router-view（称它为一级router-view）它有用keep-alive包裹着，用来放二级菜单对应的页面，所以对于二级菜单来说，它都是用同一个router-view。如果我需要创建三级菜单的话，那就需要在二级菜单目录里创建一个包含router-view（称它为二级router-view）的index.vue文件，用来放三级菜单对应的页面，那么你就会发现这个三级菜单的页面怎么也缓存不了。

 

因为只有一级router-view被keep-alive包裹起着缓存作用，下面的router-view它不缓存。当然我们也可以在二级的router-view也包一个keep-alive，也用include属性，但你会发现也用不了，因为还要匹配name值，就是说二级router-view的文件也得写上name值，写上name值后你发现还是用不了，因为include数组里面没有这个二级router-view的name值，所以你还得在tabsView里的addView里面做手脚，把路由所匹配到的所有路由的name值都添加到cachedViews里，然后还要在关闭时再进行处理。天啊。我想想都头痛，理论是应该是可以实现的，但会增加了很多前端代码量。

 

请注意！下面的方法也是有Bug的，请重点看下面的BUT开始部分

还好keep-alive还有另一个属性exclude，我马上就有思路了，而且非常简洁，默认全部页面进行缓存，所有的router-view都包一层keep-alive，只有在点击标签卡上的关闭按钮时，往$store.state.sys.excludeViews添加关闭页面的name值，下次打开后再从excludeViews里面把页面的name值删除掉就行了，非常地简单易懂，不过最底层的页面，仍然需要写上跟路由定义时完全匹配的name值。这一步我仍然想不到有什么办法可以省略掉。

为方便代码，我写了一个组件aliveRouterView组件，并合局注册，这个组件用来代替router-view组件，如下面代码所示，$store.state.sys.config.PAGE_TABS这个值是是否开户多页面标签功能参数

 

多页面标签组件viewTabs.vue，如下面代码所示

 

贴上我的sys的store文件，后面我发现，我把页面name添加到excludeViews后，在下一帧中再从excludeViews中把name删除后，这样也能有效果。如下面excludeView所示。这样就更加简洁。我只需在关闭标签卡时处理一下就行了。

const sys = {
    state: {
        permissionRouters: [],//权限路由表
        permissionMenus: [],//权限菜单列表
        config: null, //系统配置        
        excludeViews: [] //用于多页面选项卡
    },
    getters: {

    },
    mutations: {
        SET_PERMISSION_ROUTERS(state, routers) {
            state.permissionRouters = routers;
        },
        SET_PERMISSION_MENUS(state, menus) {
            state.permissionMenus = menus;
        },
        SET_CONFIG(state, config) {
            state.config = config;
        },
        ADD_EXCLUDE_VIEW(state, viewName) {
            state.excludeViews.push(viewName);
        },
        DEL_EXCLUDE_VIEW(state, viewName) {
            let index = state.excludeViews.indexOf(viewName);
            if (index >= 0) {
                state.excludeViews.splice(index, 1);
            }
        }
    },
    actions: {
        //排除页面
        excludeView({ state, commit, dispatch }, viewName) {
            if (!state.excludeViews.includes(viewName)) {
                commit("ADD_EXCLUDE_VIEW", viewName);
                Promise.resolve().then(() => {
                    commit("DEL_EXCLUDE_VIEW", viewName);
                })
            }
        }
    }
}
export default sys

 

效果如下图所示，记得一点，就是得在你的页面上填写name值，需要跟定义路由时完全一致

 

BUT!!当我截完上面的动图后，我就发现了问题了，而且是一个无法解决的问题，按我上面的方法，如果我点一下首页，再点回原来的用户管理，再关闭用户管理，再打开用户管理，你会发现缓存一直都在。

这是为什么呢？究根诘底还是这个嵌套router-view的问题，不同的router-view的缓存是独立的，首页页面是缓存在一级router-view下面，而用户管理页面是缓存在二级router-view下面，当我关闭用户管理页面后，只是往excludeViews添加了用户管理页面的name（sys.anme），所以只会删除二级router-view下面name值为sys.user的页面，二级router-view的name值为sys，它还缓存在一级router-view，所以导致用户管理一直缓存着。

当然我也想过在关闭页面时，把页面父级的所有router-view的name值都添加到excludeViews里面，这样的话，也会出现问题，就是当我关闭用户管理页面后，同样在name值为sys的二级router-view下面的页面缓存都删除掉了。

当我测试了一晚上，我发现这真的是无解的，中间我也试过网上说的暴力删除cache方法（方法介绍），也是因为这个嵌套router-view的问题导致失败。

其实网上有人提出的解决方法是把框架改成只有一个一级router-view，一开始我觉得这是个下策，后面发现这也是唯一的方法了。

无奈，我确实不想扔弃这个多页面标签功能。那就改吧，其实改起来也不复杂，就是将菜单跟路由数组分为两成数组，各自独立。路由全部同级，均在layout布局组件的children里面。

只使用一级router-view后面，这个多页面标签功能就非常好解决了，用include或exclude都可以，没有什么问题，但这两种方法都得在页面上写name值，我是一个懒惰的程序员，总是写这种跟业务无关系的name值显得特别多余。幸运的是，我之前在网上有找到一种暴力删除缓存的方法，经过我的测试后，发现只有一个小问题（下面会提到），其它方面几乎完美，而且跟include、exclude相比，还能完美支持同个页面可以根据不同参数同时缓存的功能。（在vue-element-admin里面也有说到include是没法支持这种功能的，如下图）

 

思想是这样的，在store里创建一个openedPageRouters（已打开的页面路由数组），我watch路由的变化，当打开一个新页面时，往openedPageRouters里面添加页面路由，当我关闭页面标签时，到openedPageRouters里面删除对应的页面路由，而上面提到的暴力删除缓存，是在页面的beforeRouterLeave事件中进行删除中，所以我注册一个全局mixin的beforeRouterLeave事件，检测离开的页面如果不存在于openedPageRouters数组里面，那就进行缓存删除。

思路很完美，当然里面还有一个小问题，就是删除不是当前激活的页面，怎么处理，因为beforeRouterLeave必须在要删除页面的生命周期才能触发的，这个我用了点小手段，我先跳转到要删除的页面，然后往openedPageRouters里删除这个页面路由，然后再跳回原来的页面，这样就能让它触发beforeRouterLeave了。哈哈，不过这个会导致一个小问题，就是地址栏的闪动一下，也就是上面提到的小问题。

下面是我的pageTabs.vue多页面标签组件的代码

<template>
  <div class="__common-layout-pageTabs">
    <el-scrollbar>
      <div class="__tabs">
        <div
          class="__tab-item"
          v-for="item in $store.state.sys.openedPageRouters"
          :class="{ '__is-active': item.meta.canMultipleOpen?item.fullPath==$route.fullPath:item.path==$route.path }"
          :key="item.fullPath"
          @click="onClick(item)"
        >
          {{item.meta.title}}
          <span
            class="el-icon-close"
            @click.stop="onClose(item)"
            :style="$store.state.sys.openedPageRouters.length<=1?'width:0;':''"
          >span>
        div>
      div>
    el-scrollbar>
  div>
template>
<script>
export default {
  watch: {
    $route: {
      handler(v) {
        this.$store.dispatch("openPage", v);
      },
      immediate: true
    }
  },
  methods: {
    //点击页面标签卡时
    onClick(data) {
      if (this.$route.fullPath != data.fullPath) {
        this.$router.push(data.fullPath);
      }
    },
    //关闭页面标签时
    onClose(route) {
      if (route.fullPath == this.$route.fullPath) {
        let index = this.$store.state.sys.openedPageRouters.indexOf(route);
        this.$store.dispatch("closePage", route);
        //删除页面后，跳转到上一页面
        this.$router.push(
          this.$store.state.sys.openedPageRouters[index < 1 ? 0 : index - 1]
            .path
        );
      } else {
        let lastPath = this.$route.fullPath;
        //先跳转到要删除的页面，再删除页面路由，再跳转回来原来的页面
        this.$router.replace(route).then(() => {          
          this.$store.dispatch("closePage", route);
          this.$router.replace(lastPath);
        });
      }
    }
  }
};
script>
<style lang="scss">
.__common-layout-pageTabs {
  $c-tab-border-color: #dcdfe6;
  position: relative;
  &::before {
    content: "";
    border-bottom: 1px solid $c-tab-border-color;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 100%;
  }
  .__tabs {
    display: flex;
    .__tab-item {
      white-space: nowrap;
      padding: 8px 6px 8px 18px;
      font-size: 12px;
      border: 1px solid $c-tab-border-color;
      border-left: none;
      border-bottom: 0px;
      line-height: 14px;
      cursor: pointer;
      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
        padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      &:first-child {
        border-left: 1px solid $c-tab-border-color;
        border-top-left-radius: 2px;
        margin-left: 10px;
      }
      &:last-child {
        border-top-right-radius: 2px;
        margin-right: 10px;
      }
      &:not(.__is-active):hover {
        color: #409eff;
        .el-icon-close {
          width: 12px;
          margin-right: 0px;
        }
      }
      &.__is-active {
        padding-right: 12px;
        border-bottom: 1px solid #fff;
        color: #409eff;
        .el-icon-close {
          width: 12px;
          margin-right: 0px;
          margin-left: 2px;
        }
      }
      .el-icon-close {
        width: 0px;
        height: 12px;
        overflow: hidden;
        border-radius: 50%;
        font-size: 12px;
        margin-right: 12px;
        transform-origin: 100% 50%;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        vertical-align: text-top;
        &:hover {
          background-color: #c0c4cc;
          color: #fff;
        }
      }
    }
  }
}
style>

 

以下是store代码

const sys = {
    state: {
        menus: [],//
        permissionRouters: [],//权限路由表
        permissionMenus: [],//权限菜单列表
        config: null, //系统配置        
        openedPageRouters: [] //已打开原页面路由
    },
    getters: {

    },
    mutations: {
        SET_PERMISSION_ROUTERS(state, routers) {
            state.permissionRouters = routers;
        },
        SET_PERMISSION_MENUS(state, menus) {
            state.permissionMenus = menus;
        },
        SET_MENUS(state, menus) {
            state.menus = menus;
        },
        SET_CONFIG(state, config) {
            state.config = config;
        },
        //添加页面路由        
        ADD_PAGE_ROUTER(state, route) {
            state.openedPageRouters.push(route);
        },
        //删除页面路由
        DEL_PAGE_ROUTER(state, route) {
            let index = state.openedPageRouters.indexOf(route);
            if (index >= 0) {
                state.openedPageRouters.splice(index, 1);
            }
        },
        //替换页面路由
        REPLACE_PAGE_ROUTER(state, route) {
            for (let key in state.openedPageRouters) {
                if (state.openedPageRouters[key].path == route.path) {
                    state.openedPageRouters.splice(key, 1, route)
                    break;
                }
            }
        }
    },
    actions: {
        //打开页面
        openPage({ state, commit }, route) {
            let isExist = state.openedPageRouters.some(
                item => item.fullPath == route.fullPath
            );
            if (!isExist) {
                //判断页面是否支持不同参数多开页面功能，如果不支持且已存在path值一样的页面路由，那就替换它
                if (route.meta.canMultipleOpen || !state.openedPageRouters.some(
                    item => item.path == route.path
                )) {
                    commit("ADD_PAGE_ROUTER", route);
                } else {
                    commit("REPLACE_PAGE_ROUTER", route);
                }
            }
        },
        //关闭页面
        closePage({ state, commit }, route) {
            commit("DEL_PAGE_ROUTER", route);
        }        
    }
}
export default sys

 

以下是暴力删除页面缓存的代码，我写成了一个全局的mixin

import Vue from 'vue'
Vue.mixin({
  beforeRouteLeave(to, from, next) {
    //限制只有在我写的那个父类里才可能会用这个缓存删除功能
    if (!this.$parent || this.$parent.$el.className != "el-main __common-layout-main" || !this.$store.state.sys.config.PAGE_TABS) {
      next();
      return;
    }
    let isExist = this.$store.state.sys.openedPageRouters.some(item => item.fullPath == from.fullPath)
    if (!isExist) {
      let tag = this.$vnode.tag;
      let cache = this.$vnode.parent.componentInstance.cache;
      let keys = this.$vnode.parent.componentInstance.keys;
      let key;
      for (let k in cache) {
        if (cache[k].tag == tag) {
          key = k;
          break;
        }
      }
      if (key) {
        if (cache[key] != null) {
          delete cache[key];
          let index = keys.indexOf(key);
          if (index > -1) {
            keys.splice(index, 1);
          }
        }
      }
    }
    next();
  }
})

 

 然后router-view这样使用，根据我的配置$store.state.sys.config.PAGE_TABS（是否启用多页面标签）进行判断 ，对了，我相信有不少人肯定会想到，路由不嵌套了，没有matched数组了，怎么弄面包屑，可以看我下面代码的处理，$store.state.sys.permissionMenus这个数组是我从后台传过来的，是一个根据当前用户的权限获取到的所有有权限访问的菜单数组，都是一级数组，没有嵌套关系，我的菜单数组跟路由都是根据这个permissionMenus进行构建的。而我的面包屑数组就是从这个数组递归出来的。

<template>
  <el-main class="__common-layout-main">
    <page-tabs class="c-mg-t-10p" v-if="$store.state.sys.config.PAGE_TABS" />
    <div class="c-pd-20p">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="m in breadcrumbItems" :key="m.id">{{m.name}}el-breadcrumb-item>
      el-breadcrumb>
      <div class="c-h-15p">div>
      <keep-alive v-if="$store.state.sys.config.PAGE_TABS">
        <router-view :key="$route.fullPath" />
      keep-alive>
      <router-view v-else />
    div>
  el-main>
template>
<script>
import pageTabs from "./pageTabs";
export default {
  components: { pageTabs },
  data() {
    return {
      viewNames: ["role"]
    };
  },
  computed: {
    breadcrumbItems() {
      let items = [];
      let buildItems = id => {
        let b = this.$store.state.sys.permissionMenus.find(
          item => item.id == id
        );
        if (b) {
          items.unshift(b);
          if (b.parentId) {
            buildItems(b.parentId);
          }
        }
      };
      buildItems(this.$route.meta.id);
      return items;
    }
  }
};
script>
<style lang="scss">
$c-tab-border-color: #dcdfe6;
.__common-layout-main.el-main {
  padding: 0px;
  overflow: unset;
  .el-breadcrumb {
    font-size: 12px;
  }
}
style>

 

演示一个最终效果，哎，弄了我整整两天时间，不过我改成不嵌套路由后，发现代码量也少了很多，也是因祸得福啊。这更符合我的Less框架的理念了。哈哈哈！

对了，我之前有说到个小问题，大家可以仔细看一下，下图的地址栏，当我关闭非当前激活的页面标签时，你会发现地址栏会闪现一下。好吧，下面这个动图还不太明显。

大家可以到我的LessAdmin框架预览地址测试下，不要乱改菜单数据哦，会导致打不开的

http://test.caijt.com:9001

用户：superadmin

密码：admin