以前看各种 xxx-admin 还是没有tab的形式，现在再来看，就都变成了动态多tab的形式。
那么动态tab是怎么实现的呢？

Tabs 标签页

首选想到的就是UI库提供的Tabs 标签页，本着“拿来主义”当然要用现成的了。
看看官网的介绍，可以采用“动态增减标签页”里的例子来做，只是自带的那个“x”飘来飘去的太烦人，所以去掉了，用插槽自己做一个“x”。

  <el-tabs
    v-model="activeName"
    type="card"
    @tab-click="tabClick"
  >
    <el-tab-pane label="桌面" :name="0">桌面</el-tab-pane>
    <el-tab-pane
      v-for="(item) in tabData"
      :key="'tab_' + item.id"
      :label="item.title"
      :name="item.id"
    >
      <template #label>
        <span>{{item.title}} &nbsp; &nbsp;
          <i class="el-icon-error" @click.stop="tabRemove(item.id)" ></i>
        </span>
      </template>
    </el-tab-pane>
  </el-tabs>

桌面
首先预留一个“桌面”的tab，可以放置工作提醒、todo、各种图表。
tabData
这是一个数组，存放需要显示的tab。那么数组里的数据是哪里来的呢？当然是通过点击菜单创建的。
插槽
因为要自己加一个“x”，所以title部分采用了插槽的方式，先显示title，然后用icon做一个关闭的图标，再加上click的事件，就ok了。

删除标签

删除tab呢，其实就是删除数组里面的一个元素，所以要先得到数组下标，然后删除即可。
另外这里有一个小策略，如果删除的是非激活的tab，那么直接删除即可。
但是如果要删除激活的tab，那么删除后就要找一个tab自动激活，否则就白了。

  // 删除 tab
  const tabRemove = (modId, index) => {
    // 判断是不是激活的tab。非激活，直接删除；激活的，删除后找到左面的tab
    if (modId === tabState.activeName) {
      if (tabData.length > 1) {
        // 删除激活 tab，激活左侧标签
        tabState.activeName = tabData[index - 1].id
        // 路由跳转
        const currMenu = tabState.menu.filter((a) => a.id === modId)[0]
        push({ name: currMenu.routeName, params: { moduleId: modId } })
      } else {
        // 激活桌面
        tabState.activeName = 0
      }
    }
    // 删除tab
    tabData.splice(index, 1)
  }

未完待续。。。

vue3动态 tab（一）

Tabs 标签页

删除标签