elementplus利用tabs标签页，实现自定义动态增减标签页功能

标签页一般配合菜单实现，当你点击一级菜单或者二级菜单时，可以增加对应的标签页，当你点击对应的标签页，可以触发对应的一级菜单或者二级菜单。

思路：
① 先定义好tabs的绑定值(activeTab)，标签页数据(tabList)

② 利用onBeforeRouteUpdate方法，可以实现在当前组件中获取其他组件中的路由变化信息，例如你在菜单组件中点击二级菜单，那么在标签页组件中可以通过onBeforeRouteUpdate拿到对应的路由数据。定义添加标签导航addTab方法，查找tabList是否包含你点击的路由信息，如果没有则放入tabList中，并修改activeTab。

③ 页面刷新后会失去点击后的记录，因此可以使用vueuse中的cookie，初始化标签页数据(initTabList)

④ 删除标签页(removeTab )，重要的是删除当前标签页可以直接切换至下一个或上一个标签页：
1、首先就需要判断你当前点击的标签页路径是不是和activeTab路径一致（确认关闭的是否是当前标签页）；
2、其次遍历tabList，拿到他每一个数据和索引，再次判断要删除的路径(currentTab)是否和tabList(tab.path)匹配，获取要删除的tabs的下一条(tabs[index + 1])或者上一条，如果存在那么赋值给activeTab；
3、最后重新赋值activeTab，过滤删除后的tabList，再设置cookie就可以了。

<template>
    <el-tabs
      v-model="activeTab"
      type="card"
      class="flex-1"
      @tab-change="tabChange"
      @tab-remove="removeTab"
      style="min-width: 100px"
    >
      <el-tab-pane
        v-for="item in tabList"
        :key="item.path"
        :label="item.title"
        :name="item.path"
        :closable="item.path != '/'"
      ></el-tab-pane>
    </el-tabs>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { useCookies } from "@vueuse/integrations/useCookies";

  const route = useRoute();
  const router = useRouter();
  const cookie = useCookies();

  const activeTab = ref(route.path);
  const tabList = ref([
    {
      title: "后台首页",
      path: "/",
    },
  ]);

  //点击标签跳转指定路由
  function tabChange(path) {
    router.push(path);
    activeTab.value = path;
  }

  //添加标签导航
  function addTab(tab) {
    const notTab = tabList.value.findIndex((e) => e.path == tab.path) == -1;
    if (notTab) {
      tabList.value.push(tab);
    }
    cookie.set("tabList", tabList.value);
  }

  //初始化tabList
  function initTabList() {
    const data = cookie.get("tabList");
    if (data) {
      tabList.value = data;
    }
  }
  initTabList();

  //获取路由跳转后的tab数据
  onBeforeRouteUpdate((p) => {
    activeTab.value = p.path;
    addTab({
      title: p.meta.title,
      path: p.path,
    });
  });

  //删除tab
  const removeTab = (currentTab) => {
    let tabs = tabList.value;
    let a = activeTab.value;
    //如果当前路径和你要删除的路径一致
    if (currentTab == a) {
      tabs.forEach((tab, index) => {
        //要删除的路径和tabList的路径匹配
        if (tab.path == currentTab) {
          const nextTab = tabs[index + 1] || tabs[index - 1];
          //如果存在，获取nextTab路径
          if (nextTab) {
            a = nextTab.path;
          }
        }
      });
    }
    //重新赋值activeTab
    activeTab.value = a;
    //过滤删除后的tabList
    tabList.value = tabList.value.filter((tab) => tab.path != currentTab);
    //设置cookie
    cookie.set("tabList", tabList.value);
  };
</script>