//mainview.vue
<template>
<el-container>
        <el-header>header頂部欄</el-header>
        <el-container>
            <el-aside>
            aside側(cè)邊欄
            <leftbar></leftbar>//leftbar.vue
            </el-aside>
            <el-main>main主界面
            		<el-tabs>標(biāo)簽頁
            			<el-tab-pane>
            				標(biāo)簽頁顯示區(qū)域
            			</el-tab-pane>
            		</el-tabs>
            </el-main>
        </el-container>
    </el-container>
 <template>

	<el-tabs class="tabs" 
	         v-model="editableTabsValue" 
             type="border-card" 
             @tab-remove="removeTab"
             @tab-click="clickTab">
           <el-tab-pane class="tab-pane" 
           				v-for="item in editableTabs" 						      
           				:closable="item.close" 
                        :key="item.name" 
                        :label="item.title" 
                        :name="item.name" >
                         {{item.content}}
                        <RouterView></RouterView>//標(biāo)簽頁界面路由顯示
            </el-tab-pane>
     </el-tabs>

state: {
    	//當(dāng)前打開的界面路由，初始值為主頁的路由
    editableTabsValue:'/mainview/index',
    //存放當(dāng)前打開的標(biāo)簽頁的數(shù)組，初始時只有首頁
    editableTabs:[{
      title:'首頁',//標(biāo)簽頁名
      name:'/mainview/index',//標(biāo)簽頁路由
      close:false//該標(biāo)簽頁是否可關(guān)閉，這里是首頁標(biāo)簽頁不可被關(guān)閉
    }]
  },

ADD_TABS:(state,tab)=>{//增加標(biāo)簽頁方法
	//在editableTabs中查找此界面是否已打開，否進入if
   if(state.editableTabs.findIndex(e=>e.name===tab.path)===-1){
        state.editableTabs.push({//添加當(dāng)前標(biāo)簽頁進入editableTabs
          title:tab.name,
          name:tab.path,
          close:true//使除了首頁標(biāo)簽頁外其他都可關(guān)閉
        })
      }
      state.editableTabsValue=tab.path//添加標(biāo)簽頁后默認(rèn)打開
},
CHANGE_TABS:(state,name)=>{//切換標(biāo)簽頁方法
		 //將需打開標(biāo)簽頁路由賦予editableTabsvalue
      state.editableTabsValue=name
},

clickTab(tab){
            var name=JSON.stringify(tab.paneName).replace('"','').replace('"','')//對tab參數(shù)處理，以獲得當(dāng)前點擊的標(biāo)簽頁的路由
            store.commit('CHANGE_TABS',name)//調(diào)用切換方法切換標(biāo)簽頁
            router.push(name)//路由跳轉(zhuǎn)以實現(xiàn)切換界面
    }

refreshTabs(){
        // console.log("refresh");
        this.editableTabsValue=store.state.editableTabsValue;
        this.editableTabs=store.state.editableTabs;
    },

watch:{
    "$store.state":{
            deep:true,
            handler:function(){
                this.refreshTabs();
            }
        },

removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        store.state.editableTabsValue=activeName;
        store.state.editableTabs=tabs.filter(tab=>tab.name!==targetName);
        router.push(activeName)
    },