<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';
// 聲明路由對象
const router = useRouter();
// 聲明vuex對象
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)聽vuex的數(shù)據(jù)會導致失效，這里可能是因為vue性能問題，vue的底層沒有給vuex的數(shù)據(jù)也進行數(shù)據(jù)綁定吧
// 因此，這里使用computed這個api函數(shù)來返回vuex中的值，然后將此方法體放入watch中監(jiān)聽
const getTabsActiveName = computed(()=>{
	return store.state.TabsActiveName;
})

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

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

  setTimeout(()=>{
    // 利用定時器達到延時方法，防止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:"首頁",
        path:'/home'
      }
    ],
    TabsActiveName: ref("/home")
  }
export { state }

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

// 這里是LeftMenu.vue中
// 菜單點擊時觸發(fā)的方法
menuClick(row){
    // 將當前點擊的對象傳遞給指定方法
    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'
//@ 后是自己組件的真實路徑
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>