vue+elment tab标签页 配置导航条

后台管理系统 布局 左菜单 上头部 main中加入tab条 像这样 这不是重点,重点再说tab条导航设置 首先store/index.js中配置 state的属性 配置当前点击的路由 和 已经存储的数组

options: [{name:'商品',route:'/goods',query:{}}], curentActive: { path:'/goods', query:{}, }, ![] 在store/mutations.js中写入方法

// 添加tabs
add_tabs (state, data) {
  this.state.options.push(data);
},
// 删除tabs
delete_tabs (state, route) {
  let index = 0;
  for (let option of state.options) {
    if (option.route === route) {
      break;
    }
    index++;
  }
  this.state.options.splice(index, 1);
},
// 设置当前激活的tab
set_active_index (state, index) {
  this.state.curentActive = index;
},
好了,铺垫做完  下一步就是操作tab条了  直接贴代码
<template>
<div class='tabs'>
		<el-tabs   v-model="curentActive.path"  @tab-click="tabClick" type="card"  @tab-remove="tabRemove">
			<el-tab-pane>
			    <span slot="label"><i :class="[$store.state.isOpenedSlider?'el-icon-s-unfold':'el-icon-s-fold']" ></i> </span>
			  </el-tab-pane>
			  <template v-if="options.length>1">
			  <el-tab-pane
			  closable
			  			 
			   :key="item.route"
			   v-for="item in options"
			   :label="item.name"
			   :name="item.route"
			  >
			   </el-tab-pane>
			  </template>
		   <template v-else>
			   <el-tab-pane
			    :key="item.route"
			    v-for="item in options"
			    :label="item.name"
			    :name="item.route"
			   >
			    </el-tab-pane>
		   </template>
		 
		</el-tabs>
    
</div>

export default { name: '', components: {}, data() { return { isActive:false, levelList: [], }; },

methods: { // tab切换时，动态的切换路由 tabClick (tab) { if(tab.index =='0'){ this.toggleClick(); }else{ let path = this.curentActive; this.$router.push(path);
}

  },
  tabRemove (targetName) {
	  console.log(targetName)
    // 首页不可删除
    if(targetName == '/') {
      return;
    }
    this.$store.commit('delete_tabs', targetName);
    if (this.curentActive.path === targetName) {
      // 设置当前激活的路由
      if (this.options && this.options.length >= 1) {
        this.$store.commit('set_active_index',{path:this.options[this.options.length-1].route,query:this.options[this.options.length-1].query} );
        this.$router.push(this.curentActive);
      } 
    }
  },
	 toggleClick() {
		 this.$store.dispatch('toggleSlider')
	 }
  },
  computed: {
    options () {
      return this.$store.state.options;
    },
    curentActive: {
      get () {
        return this.$store.state.curentActive;
      },
      set (val) {
        this.$store.commit('set_active_index', val);
      }
    }
  },
 created () {
       
    },
	watch: {
		 '$route'(to) {
			 // console.log(to)
		   let flag = false;
		   for (let option of this.options ) {
		     if (option.name === to.meta.title) {
		       flag = true;
		       this.$store.commit('set_active_index',  {path:to.path,query:to.query});
		       break
		     }
		   }
		   if (!flag) {
		     this.$store.commit('add_tabs', {route:  to.path, name: to.meta.title,query:to.query});
		     this.$store.commit('set_active_index', {path:to.path,query:to.query})
		   }
		 }
	   }

} 写法low 目测简单粗暴 欢迎指教