0 环境
1 参考文档
2 正文
先分析下图代码：
先看el-icon，它判断item.icon是否存在，存在的话在再去判断tabsIcon，tabsIcon是在useGlobalStore中定义的，默认为true，两种都为true，才会加载图标。具体看下图。
现在再看 @tab-click="tabClick" @tab-remove="tabRemove"，对应的实现如下图：
tabClick的实现是：先得到name，通过name跳转路由。再往下看tabRemove的实现呢，传入字符串fullPath，这里的fullPath、route.fullPath，看下图。
tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);，盲猜一下，fullPath == route.fullPath，应该会有判断，删除当前标签，还是其它标签的区别。现在点进tabStore.removeTabs。
代码如下图：
如果删除的是当前标签页，遍历this.tabsMenuList（储存标签的数组），与当前标签路由的不一样的，返回，一样的，找到它前面或后面一个标签，若它是个孤儿，直接返回。若它是存在，跳转到该路由。再往下就是移除keepalive，在this.tabsMenuList里找是否有path等于 tabPath的，有且isKeepAlive为真，且调用removeKeepAliveName，详细看下图。在往下set tabs，this.tabsMenuList（储存标签的数组）过滤掉已删除的路由，重新设置tab。
看下图：
removeKeepAliveName它移除在keepalive数组里对应相等的path。
3 总结
这里的标签栏tab的点击和删除看着难，其实挨个梳理，点击，就是选中当前标签，点进去选中相当于我们点击侧边栏对应的路由。然后删除主要的是，假如我删除了当前标签，谁来接替当前标签的位置，我前面的还是后面，有一个的话，就跳到该标签上，若是没人接替，直接返回。在然后当前标签就要从tab数组中空出来。keepalive数组移除也是这个道理。
