基于vue实现动态Tab标签页功能

  <el-tabs
    v-model="activeName"
    type="card"
    closable
    @tab-click="handleClick"
    @tab-remove ="handleRemove"
  >
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>

<!-- 动态tab标签页 -->
  <el-tabs
    v-if="allTabs.length > 0"
    v-model="activeTab"
    type="card"
    closable
    @tab-click="clickTab"
    @tab-remove="removeTab"
  >
    <el-tab-pane
      v-for="item in allTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>

// 当前激活的tab
let activeTab = ref("");
// 所有tab
let allTabs = ref([]);

// 挂载 DOM 之前
onBeforeMount(() => {
  // 当前激活的菜单
  activePath.value = sessionStorage.getItem("activePath")
    ? sessionStorage.getItem("activePath")
    : "/index";
  // 所有tab
  allTabs.value = JSON.parse(sessionStorage.getItem("allTabs")) || [];
  // 激活的tab
  activeTab.value = sessionStorage.getItem("activeTab") || "";
});

// 点击左侧菜单
const saveActiveNav = (path, tab) => {
  // 当前激活的菜单
  activePath.value = path;
  sessionStorage.setItem("activePath", path);
  // 如果是首页，就移除所有的 Tab
  if (tab.name === "首页") {
    allTabs.value = [];
    sessionStorage.removeItem("allTabs");
    sessionStorage.removeItem("activeTab");
  } else {
    let index = allTabs.value.findIndex((item) => item.name === tab.name);
    //  如果不存在
    if (index === -1) {
      // 添加到tabs中
      allTabs.value.push(Object.assign(tab, { path: path }));
      sessionStorage.setItem("allTabs", JSON.stringify(allTabs.value));
      sessionStorage.setItem("activeTab", tab.name);
    }
    // 当前激活的tab
    activeTab.value = tab.name;
  }
};

// 点击tab
const clickTab = (tab) => {
  let tabName = tab.paneName;
  //  存储激活的 Tab
  sessionStorage.setItem("activeTab", tabName);
  let selectTab = allTabs.value.find((tab) => tab.name === tabName);
  if (selectTab !== undefined) {
    // 激活 Tab
    activeTab.value = selectTab.name;
    // 跳转页面，激活左侧菜单
    changeActiveRoute(selectTab.path);
  }
};

// 跳转路由，激活路由
const changeActiveRoute = (path) => {
  activePath.value = path;
  sessionStorage.setItem("activePath", path);
  router.push(path);
};

// 移除tab。targetName 要移除的tab
const removeTab = (targetName) => {
  let tabs = allTabs.value;
  // activeName 当前激活的tab
  let activeName = activeTab.value;
  if (activeTab.value === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        // 下一个 tab：索引-1或者索引+1
        const nextTab = tabs[index + 1] || tabs[index - 1];
        // 如果存在就激活 Tab，存储激活的 Tab，跳转页面
        if (nextTab) {
          activeName = nextTab.name;
          changeActiveRoute(nextTab.path);
          sessionStorage.setItem("activeTab", nextTab.name);
          // 否则就跳转到首页
        } else {
          changeActiveRoute("/index");
        }
      }
    });
  }
  // 激活 tab
  activeTab.value = activeName;
  // 移除选择的 Tab
  allTabs.value = tabs.filter((tab) => tab.name !== targetName);
  // 存储所有的 tab
  sessionStorage.setItem("allTabs", JSON.stringify(allTabs.value));
};