vue使用el-tabs实现标签页（内存+vuex）

vue使用el-tabs实现标签页（内存+vuex）
效果图：
1：

2：

3：内存中

这是一个组件，例如：pageTabs.vue（组件是可以做到独立监听路由变化的，所以不需要外部调用什么内部的方法，所以可以抽离成为一个组件），监听路由改变进行新增标签，以及el-tabs组件的切换，删除

代码：

<template><divclass="page-tabs-index"><el-tabs v-model="activeRoute"type="card" :closable="closable" @tab-click="clickTab" @edit="handleTabsEdit"><el-tab-pane         :key="index"         v-for="(item, index) in tabs"         :label="item.title"         :name="item.route"><spanslot="label" @click.middle="removeTabByMiddle(item.route)">{{item.title}}</span></el-tab-pane></el-tabs></div></template><script>export default{data(){         return{           closable: false,           activeRoute:'',           tabs:[]}},       methods:{         // 增删tabs         handleTabsEdit(targetName,action){           // console.log('tab增删:',targetName,action);           if(action==='remove'){             this.methods('removeTab',targetName);             this.methods('checkClosable');}},         // 鼠标中键删除         removeTabByMiddle(route){           if(this.closable){             this.methods('removeTab',route);             this.methods('checkClosable');}},         // 点击tab,item是被选中的标签的vue实例         clickTab(item){           if(this.$route.name=== item.name){return;}           // console.log('tab切换：', item.name);           this.$router.push({name:item.name})},         // 这里需要配合keep-alive的includeAPI，设置vuex的缓存list，以实现tab关闭后vue不缓存该页面         // 加载tabs缓存loadTabs(){           const pageTabs= sessionStorage.getItem('page-tabs');if(pageTabs){             this.tabs= JSON.parse(pageTabs);}           this.$store.commit('setKeepAliveList',this.tabs.map(i=>i.route));},          // tab切换更新updateTabs(){           const route= this.$route.name;           const title= route;           if(!route|| route==='index'){             // 这里是处理layout中第一次加载会是null，后续由监听$route更新，(index路由是引导用的，不需要)             // 而如果是当从没有tabs的页面跳转过来时，不走下面，将不会变更当前激活return;}           // 新增if(!this.tabs.find(i=> i.route=== route)){             this.tabs.push({ route, title});}           this.activeRoute= route;           // this.$route.meta.keepAlive=true;           // 缓存tabs           sessionStorage.setItem('page-tabs', JSON.stringify(this.tabs));           this.$store.commit('setKeepAliveList',this.tabs.map(i=>i.route));},          // 移除tab         removeTab(route){           // 保存indexlet index= this.tabs.findIndex(i=> i.route=== route);           this.tabs= this.tabs.filter(i=> i.route!== route);           this.$store.commit('setKeepAliveList',this.tabs.map(i=>i.route));           // 如果删除的是当前的routeif(this.activeRoute=== route){             // 将当前激活route切换为刚才删除的后一个if(index> this.tabs.length-1){               index -=1;}             this.activeRoute= this.tabs[index].route;             // this.$route.meta.keepAlive=false;             this.$router.push({ name: this.activeRoute});}           // 缓存tabs           sessionStorage.setItem('page-tabs', JSON.stringify(this.tabs));},          // 检查是否可以继续删除checkClosable(){           this.closable= this.tabs.length>1;}},created(){           // this.lists= this.$store.state.other.houseList;},mounted(){         this.loadTabs()         this.updateTabs()         this.checkClosable()},       watch:{         $route(){           this.loadTabs()           this.updateTabs()           this.checkClosable()}}}</script><style scopedlang="scss"> // 组件高度$tabLineHeight:30px; // 边框颜色$borderColor:#488ba0; // 未激活的以及tab本身的背景$background:#09142e; // 激活的标签的背景$background-active:#488ba0; // 未激活标签的字体颜色$fontColor:#30c0cd; .page-tabs-index{   height:$tabLineHeight;   ::v-deep .el-tabs{}   // 底部横线   ::v-deep .el-tabs__header{     height:$tabLineHeight;     background:$background;     box-sizing: border-box;     border-bottom: 1px solid$borderColor;}   // 左右滚动按钮   ::v-deep .el-tabs__nav-prev{     height:$tabLineHeight;     line-height:$tabLineHeight;}   ::v-deep .el-tabs__nav-next{     height:$tabLineHeight;     line-height:$tabLineHeight;}   ::v-deep .el-tabs__nav{     border-radius:0;     border-left: none;     border-right: none;     border-top: none;}    ::v-deep .el-tabs__item{     height:$tabLineHeight;     line-height:$tabLineHeight;     border-color:$borderColor;     color:#fff;     border-right: 1px solid$borderColor;     //border-radius: 3px 3px00;}    // 左侧第一个   ::v-deep .el-tabs__item.is-active:first-child{     border-left: none;}    ::v-deep .el-tabs__item:not(.is-disabled){     color:$fontColor;     border-left: none;     border-top: 2px solid transparent;}    ::v-deep .el-tabs__item.is-active{     border-bottom: 1px solid$background-active;     border-top: 2px solid$borderColor;     border-right: 1px solid$borderColor;     background:$background-active;     color:#fff;}}</style>

然后还需要创建一个vuex

export default{   name:'pageTabs',   state:{       keepAliveList:[],},   mutations:{     setKeepAliveList(state, list){       state.keepAliveList= list}}}

然后就去入口页面引入使用即可，例如App.vue

<template><divid="app"class="biggbox"><pageTabs></pageTabs><!-- 中部 --><transition><router-view></router-view></transition></div></template>

还可以用keepAlive

<keep-alive :include="keepAliveList"><router-view></router-view></keep-alive>