Vue3 Element Plus 监听标签组件变化添加、删除或切换标签页

在视图更新这一部分，关键在于如何响应路由的变化并相应地更新用户界面。在Vue.js中，这通常通过监听路由的变化和管理组件的状态来实现。以下是一个简化的代码示例，演示了如何在Vue组件中实现标签页的动态更新。

<script>
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const tabs = ref([]); // 存储所有打开的标签
    const currentTab = ref(route.path); // 当前选中的标签

    // 当路由发生变化时，更新标签页
    watch(() => route.path, (newPath) => {
      // 检查该路径的标签是否已经打开
      let tabExists = tabs.value.some(tab => tab.path === newPath);
      if (!tabExists) {
        // 如果标签未打开，则添加新标签
        tabs.value.push({
          name: route.name,
          path: newPath
        });
      }
      // 设置当前激活的标签
      currentTab.value = newPath;
    });

    // 移除标签的方法
    const removeTab = (targetName) => {
      let tabsFiltered = tabs.value.filter(tab => tab.path !== targetName);
      tabs.value = tabsFiltered;
      if (currentTab.value === targetName) {
        if (tabs.value.length > 0) {
          let lastTab = tabs.value[tabs.value.length - 1];
          currentTab.value = lastTab.path;
          router.push(lastTab.path);
        }
      }
    };

    // 在组件挂载时初始化标签
    onMounted(() => {
      if (route.path !== '/') {
        let tabExists = tabs.value.some(tab => tab.path === route.path);
        if (!tabExists) {
          tabs.value.push({
            name: route.name,
            path: route.path
          });
        }
      }
    });

    return {
      tabs,
      currentTab,
      removeTab
    };
  }
}
</script>

<template>
  <el-tabs v-model="currentTab" closable @tab-remove="removeTab">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.path"
      :label="tab.name"
      :name="tab.path">
      <!-- 这里可以放置具体的组件或者内容 -->
    </el-tab-pane>
  </el-tabs>
</template>

在这段代码中：

• 使用ref来声明响应式的数据tabs和currentTab。
• watch用于监听路由路径的变化，以便更新标签页。
• onMounted生命周期钩子用于在组件挂载时进行初始化操作。
• removeTab方法用于移除标签，并根据情况更新当前激活的标签。
• 在<template>部分，使用el-tabs组件来渲染标签页，并绑定模型currentTab来控制当前激活的标签。

此代码示例假定你使用了Element Plus UI库中的el-tabs组件来渲染标签页。如果你使用的是其他库或自定义标签页组件，可能需要调整相关代码以适应你的具体情况。