antd vue3 tabs + router 实现标签栏

在 Vue 3 中，Ant Design Vue 的 Tabs 组件的使用方法与 Vue 2 中基本相同。具体实现步骤如下：

1. 在路由配置中，添加 `meta` 字段用于标识当前路由是否需要在标签栏中显示，例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页',
      keepAlive: true, // 是否缓存组件
      showTab: true, // 是否在标签栏中显示
    },
  },
  // ...
];

2. 在 App.vue 中，使用 Tabs 组件来渲染标签栏，并使用 `router-view` 组件来渲染当前路由对应的组件：

<template>
  <div>
    <a-tabs v-model:selectedTabKey="selectedTabKey"
            type="editable-card"
            hide-add
            @edit="handleTabEdit"
            style="margin: 0 24px;">
      <a-tab-pane v-for="(tab, index) in tabs"
                  :key="tab.key"
                  :tab="tab.title"
                  :closable="index !== 0"
                  @close="handleTabClose(index)">
      </a-tab-pane>
    </a-tabs>
    <router-view />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedTabKey = ref('/');
    const tabs = ref([
      {
        key: '/',
        title: '首页',
      },
    ]);

    const addTab = (key, title) => {
      const index = tabs.value.findIndex((tab) => tab.key === key);
      if (index === -1) {
        tabs.value.push({
          key,
          title,
        });
      }
    };

    const removeTab = (key) => {
      const index = tabs.value.findIndex((tab) => tab.key === key);
      if (index !== -1) {
        tabs.value.splice(index, 1);
      }
    };

    const handleTabClose = (index) => {
      const { key } = tabs.value[index];
      removeTab(key);
      selectedTabKey.value = tabs.value[tabs.value.length - 1].key;
    };

    const handleTabEdit = (targetKey, action) => {
      if (action === 'add') {
        selectedTabKey.value = targetKey;
        addTab(targetKey, '');
      } else if (action === 'remove') {
        handleTabClose(tabs.value.findIndex((tab) => tab.key === targetKey));
      }
    };

    return {
      selectedTabKey,
      tabs,
      handleTabClose,
      handleTabEdit,
    };
  },
};
</script>

在这个示例中，我们使用了 `selectedTabKey` 和 `tabs` 两个响应式变量来分别存储当前选中的标签页和所有已打开的标签页。在 `addTab` 方法中，我们使用 `tabs` 数组来存储已打开的标签页，防止重复添加。在 `removeTab` 方法中，我们使用 `tabs` 数组来删除已关闭的标签页。在 `handleTabClose` 方法中，我们使用 `tabs` 数组来关闭标签页，并将选中的标签页设置为最后一个标签页。在 `handleTabEdit` 方法中，我们通过判断用户的操作来决定是添加标签页还是关闭标签页。在 Vue 3 中，我们使用 `ref` 来创建响应式变量。