<template>
    <div class="head_tabs">
      <keep-alive>
          <el-tabs
              v-model="HeaderTabsActiveName"
              type="card"
              @tab-click="handlePathSwicth"
              class="handleTabs"
              closable
              @tab-remove="removeHeaderTabsList"
          > 
              <el-tab-pane
                  v-for="(item,index) in HeaderTabsList"
                  :key="index"
                  :label="item.topic"
                  :name="item.path"
                  >
              </el-tab-pane>
          </el-tabs>
      </keep-alive>
    </div>
</template>
<script setup>
import { ref ,watch,computed, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
// 聲明路由對(duì)象
const router = useRouter();
// 聲明vuex對(duì)象
const store = useStore();

const HeaderTabsActiveName = ref('')
const HeaderTabsList = ref([])

onMounted(()=>{
  // 這里的數(shù)據(jù)都是在vuex中獲取的
  HeaderTabsList.value = store.state.HeaderTabs;
  HeaderTabsActiveName.value = store.state.TabsActiveName;
})

// 這里直接監(jiān)聽(tīng)vuex的數(shù)據(jù)會(huì)導(dǎo)致失效，這里可能是因?yàn)関ue性能問(wèn)題，vue的底層沒(méi)有給vuex的數(shù)據(jù)也進(jìn)行數(shù)據(jù)綁定吧
// 因此，這里使用computed這個(gè)api函數(shù)來(lái)返回vuex中的值，然后將此方法體放入watch中監(jiān)聽(tīng)
const getTabsActiveName = computed(()=>{
	return store.state.TabsActiveName;
})

// 使用watch監(jiān)聽(tīng)vuex的數(shù)據(jù)，并開(kāi)啟第一次綁定監(jiān)聽(tīng)--immediate 
watch(getTabsActiveName,(o1)=>{
  if(o1){
    // 我們每添加條數(shù)據(jù)都需要修改相關(guān)的tabs索引，否則選中項(xiàng)是不會(huì)高亮的
    HeaderTabsActiveName.value = o1;
  }
},{ immediate: true })

// 標(biāo)簽點(diǎn)擊觸發(fā)
const handlePathSwicth = (targetName)=>{
  let name = targetName.props.name;
  store.commit("updateTabsActiveName",name);
  HeaderTabsActiveName.value = name;
  // 手動(dòng)跳轉(zhuǎn)，組件不會(huì)提供跳轉(zhuǎn)功能
  router.push({
    path:name
  })
}
// 刪除tabs觸發(fā)
const removeHeaderTabsList = (targetName) => {
  // 使用vuex中自定義的方法刪除數(shù)據(jù)
  store.commit('removeHeaderTabs', targetName)

  setTimeout(()=>{
    // 利用定時(shí)器達(dá)到延時(shí)方法，防止HeaderTabsActiveName還未變就執(zhí)行下面的跳轉(zhuǎn)
    router.push({
      path:HeaderTabsActiveName.value
    })
  },0)
}
</script>

import {ref} from 'vue'
//初始化vuex的數(shù)據(jù)
const state = {
    // tabs面包屑的數(shù)據(jù)
    HeaderTabs:[
      {
        topic:"首頁(yè)",
        path:'/home'
      }
    ],
    TabsActiveName: ref("/home")
  }
export { state }

// 修改tabs的索引綁定
updateTabsActiveName(state,msg){
  // 修改標(biāo)簽索引
  state.TabsActiveName = msg
},
// 添加tabs標(biāo)簽
addHeaderTabs(state,msg){
  // 用filter過(guò)濾器看添加項(xiàng)是否已存在，如果存在則不添加
  let f = state.HeaderTabs.filter(t=>{
    return t.path == msg.path
  })
  if(f.length==0){
    state.HeaderTabs.push(msg)
  }
  state.TabsActiveName = msg.path
},
// 刪除tabs標(biāo)簽
removeHeaderTabs(state,msg){
  // 如果要?jiǎng)h除的是首頁(yè)就直接退出，這里根據(jù)業(yè)務(wù)而定
  if(msg=="/home") return;
  // 通過(guò)循環(huán)方式找到要?jiǎng)h除的數(shù)據(jù)項(xiàng)
  state.HeaderTabs.forEach((item,index)=>{
    if(item.path==msg){
      state.HeaderTabs.splice(index,1);
      return true;
    }
  })
  // 如果當(dāng)前顯示頁(yè)如刪除項(xiàng)一樣，則自動(dòng)跳轉(zhuǎn)會(huì)首頁(yè),這里也是根據(jù)具體業(yè)務(wù)而定
  if(state.TabsActiveName==msg){
    state.TabsActiveName = "/home"
  }
}

// 這里是LeftMenu.vue中
// 菜單點(diǎn)擊時(shí)觸發(fā)的方法
menuClick(row){
    // 將當(dāng)前點(diǎn)擊的對(duì)象傳遞給指定方法
    this.store.commit("addHeaderTabs",row)
    // 跳轉(zhuǎn)相關(guān)路由
    this.router.push({
        path:row.path
    })
}

<template>
    <div class="index">
      <HeaderTabs></HeaderTabs>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
//@ 后是自己組件的真實(shí)路徑
import HeaderTabs from '@/components/page/component/HeaderTabs.vue'
export default defineComponent({
    components:{
        HeaderTabs
    },
})
</script>

<template>
    <div class="index">
      <HeaderTabs></HeaderTabs>
    </div>
</template>
<script setup>
import HeaderTabs from '@/components/page/component/HeaderTabs.vue'
</script>