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

javascript/jquery

浏览数:121

2020-7-11

最近写我自己的后台开发框架,要弄一个多页面标签功能,之前有试过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这个值是是否开户多页面标签功能参数

<template>
  <keep-alive :exclude="exclude">
    <router-view />
  </keep-alive>
</template>
<script>
export default {
  computed: {
    exclude() {
      if (this.$store.state.sys.config.PAGE_TABS) {
        return this.$store.state.sys.excludeViews;
      } else {
        return /.*/;
      }
    }
  }
};
</script>

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

<template>
  <div class="__common-layout-tabView">
    <el-scrollbar>
      <div class="__tabs">
        <div
          class="__tab-item"
          :class="{ '__is-active':item.name==$route.name }"
          v-for="item in viewRouters"
          :key="item.path"
          @click="onClick(item)"
        >
          {{item.meta.title}}
          <span
            class="el-icon-close"
            @click.stop="onClose(item)"
            :style="viewRouters.length<=1?'width:0;':''"
          ></span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      viewRouters: []
    };
  },
  watch: {
    $route: {
      handler(v) {
        if (!this.viewRouters.some(item => item.name == v.name)) {
          this.viewRouters.push(v);
        }
      },
      immediate: true
    }
  },
  methods: {
    onClick(data) {
      if (this.$route.fullPath != data.fullPath) {
        this.$router.push(data.fullPath);
      }
    },
    onClose(data) {
      let index = this.viewRouters.indexOf(data);
      if (index >= 0) {
        this.viewRouters.splice(index, 1);
        if (data.name == this.$route.name) {
          this.$router.push(this.viewRouters[index < 1 ? 0 : index - 1].path);
        }
        this.$store.dispatch("excludeView", data.name);
      }
    }
  }
};
</script>
<style lang="scss">
.__common-layout-tabView {
  $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>

贴上我的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