首页 > > 网页制作 > css >

关于vue的多页面标签功能，对于嵌套router-view…

2020-06-01 16:00:54来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

关于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这个值是是否开户多页面标签功能参数

<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

 


原文链接:https://www.cnblogs.com/caijt/p/12993156.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：[04]HTML基础之块级标签

下一篇：[05]HTML基础之表格标签

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签