vuetify实现Tab多标签栏，引发的router-link/事件机制问题

写在前头

由于搭建后台管理系统，国内多采用侧边栏+多标签切换页面的方式，故在实现中同样打算做一个多标签页的组件。

↓↓↓↓↓这玩意就是标签栏，我个人习惯称为tabs

点击侧边栏的某个item，判断该页面是否已经打开过
- 没打开过：
  - vue-router自动载入组件，进入页面
  - 我们代码控制，在tabs的数组添加当前新增的这个页面的路由信息
- 打开过，切换到对应的tab-item和页面
点击不同的tab-item实现，页面的切换(这一步是vue-router自动完成的)
每个tab-item可以单独关闭(首页不可关闭)
右键tabs栏目，显示context-menu
- 可关闭当前：同直接在tab-item上关闭
- 关闭其他：保留当前页和首页
- 关闭全部：保留首页
默认关闭当前tab-item和对应的页面后，自动跳到前一个tab-item和页面

这里暂时记录当前遇到的问题，后续若有新坑，再补录。。

在基本实现了点击sidebar-item打开页面，并在tabs数组中添加新的项后，开始做关闭当前tab-item的功能，但是遇到了坑(灬ꈍ ꈍ灬)。。。

实现思路：

watch $route的变化，如果新增的tab-item在tabs数组(保存在vuex中)中不存在，就addTabItem()
点击tab-item的关闭按钮时,首先判断关闭的tab-item是不是当前的路由
如果是：
- 从tabs的数组里删除掉当前的tab-item
- 判断前一个tab-item是否存在
- 如果存在就router.push到前一个tab-item
如果不是：
- 直接从tabs数组里删除掉那个tab-item

理想的结果：

实际上：

排查思路

首先想，会不会是代码逻辑的问题，反复确认，并单独写了个简化版的demo后，确定逻辑没有问题
然后想到会不会是vuetify的tabs组件有一些内部的逻辑导致的
- google搜索了一下，没有搜到相关问题(主要怀疑在optional这个属性)
- 然后又去别人的项目中看了一下，同样使用的tabs也没有问题
在参考品别人项目的时候，看到他们都是讲逻辑卸载vuex的action中
- 这时候我想难道是我直接调用mutation出现的问题？
- 虽说action支持异步，mutation只能是同步；但是我的router.push逻辑就是写在mutation删除当前tab-item之后执行的啊，不可能出现问题啊
然后想会不会是我点击关闭按钮的时候，又触发了tab-item的点击(close按钮是包裹在tab标签里)，事件向上冒泡导致重新载入了当前页呢？
- 然后我将关闭当前tab-item按钮的点击事件改为@click.stop="onTabClose"
- 发现然并卵
- 就排除了这种可能
最后，在不停的对照别人的项目过程中，发现别人的点击事件是@click.stop.prevent="onTabClose"
- 尝试着增加了.prevent
- 果然好了，卧槽！！！！！

心里顿时一万个草尼玛飘过~~~

在骂自己为什么不多好好看几遍文档的时候，突然意识到，这TM概念我其实知道啊，但是.prevent不是阻止事件默认行为的么，劳资实在想不到在这用啊。。。。。。

本着人道主义精神，不能光骂娘，不解决问题啊，于是有了如下：

拨开云雾见光明：













a标签事件测试









这是外层

小结

你说谁TM能想到啊，吃一堑长一智把，以后再遇到类似场景的问题，一定要得多注意！！！