这篇文章主要介绍了Vue实现多页签组件的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
直接看效果，增加了右键菜单，分别有重新加载、关闭左边、关闭右边、关闭其他功能。
也可以到我的github上看看代码（如果觉得这个组件有用的话，别忘了顺手给个小星星）
代码：https://github.com/Caijt/VuePageTab
演示：https://caijt.github.io/VuePageTab/
我这个多页签组件里面的删除缓存的方法不是使用keep-alive组件自带的include、exculde结合的效果，而是使用暴力删除缓存的方法，这个在上个博客中也有提到，用这种方法的话，可以实现更完整的多页签功能，例如同个路由可以根据参数的不同同时打开不同的页签，也能不用去写那些路由的name值。
先直接看组件代码（里面用了一些element-ui的组件，如果你们不用element-ui的话。可以去掉，自己实现）
<div class="__common-layout-pageTabs"> <div class="__tabs"> <div class="__tab-item"> {{ item.meta.title }} <span class="el-icon-close" @click.stop="onClose(item)" @contextmenu.prevent.stop="" :style="openedPageRouters.length </span></div></div><div> <ul class="__contextmenu"> <li> 重新加载 </li><li> 关闭左边</li><li> 关闭右边</li><li> 关闭其他</li></ul></div></div> .__common-layout-pageTabs { .__contextmenu { // width: 100px; margin: 0; border: 1px solid #e4e7ed; background: #fff; z-inde<a style="color:transparent">本文来源gao($daima.com搞@代@#码$网</a>x: 3000; position: absolute; list-style-type: none; padding: 5px 0; border-radius: 4px; font-size: 14px; color: #333; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1); li { margin: 0; padding: 0px 15px; &:hover { background: #f2f2f2; cursor: pointer; } button { color: #2c3e50; } } } $c-tab-border-color: #dcdfe6; position: relative; &::before { content: ""; border-bottom: 1px solid $c-tab-border-color; position: absolute; left: 0; right: 0; bottom: 0; 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; } } } } }
这个组件它需要两个属性，一个是keepAliveComponentInstance（keep-alive的控件实例对象），blankRouteName（空白路由的名称）
为什么我需要keep-alive的控件实例对象呢，因为这个对象里面有两个属性，一个是cache，一个是keys，存储着keep-alive的缓存的数据，有了这个对象，我就能在页签关闭时手动删除缓存。那这个对象怎么获取呢，如下所示，在keep-alive所在的父页面上的mounted事件上进行获取（如果keep-alive跟多页签组件不在同一个父页面，那可能就得借用vuex来传值了）
<div id="app"> <div> </div></div>
而空白路由的名称，是干什么，主要我要实现刷新当前页面的功能，我们知道vue是不允许跳转到当前页面，那么我就想我先跳转到别的页面，再跳转回回来的页面，不就也实现刷新的效果了。（当然我用的是relpace，所以不会产生历史记录）
注：这个空白路由并不是固定定义在根路由上，需根据多页签组件所在位置，假如你有一个根router-view，还有一个布局组件，这个组件里面也有一个子router-view，多页签组件就在这个布局组件里，那么空白路由就需定义在布局组件对应的路由的children里面了
还有这个组件会根据路由对象的meta对象进行不同的配置，如下所示
let router = new Router({ routes: [ //这个是空白页面，重新加载当前页面会用到 { name: "blank", path: "/blank", }, { path: "/a", component: A, meta: { title: "A页面", //页面标题 canMultipleOpen: true //支持根据参数不同多开不同页签，如果你需要/a跟/a?v=123都分别打开两个页签，请设置为true，否则就只会显示一个页签，后打开的会替换到前打开的页签 } } }
以上就是Vue实现多页签组件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Vue实现多页签组件
