vue-multi-tab是一个基于vue和element-ui实现tab-router(tab-based路由)的单页多tab应用。之前在写这个项目的时候,写了一篇记录基于vue的spa多页标签实战经验的文章,然后有热心网友在下面回复了一些其他类似的项目。我一一查看,发现基本都是基于vue-router和keep-alive实现的。这种实现方式有两个明显的问题。首先是很难在选项卡内跳转。比如我在这个选项卡中打开组件a,然后点击组件a中的一个链接。想跳转到b组件,但是需要在tab不变的情况下打开,不能在新的tab中打开,所以很难基于路由实现。还有一个问题就是需要处理keep-alive的问题,有需要keep-alive的坑的童鞋们基本都明白了。基于以上原因,我决定给大家一个不同的实现方式。那么我的vue-multi-tab和其他产品有什么区别呢?——除了实现多标签功能,我想,我们还有很多不同于其他同类产品的特点,如下。在线预览https://noahlam.github.io/vue-multi-tab/主要特点:tab中可以跳转vue-router等组件Nokeep-alive,因此无需处理keep-alive问题。双重历史(标签内部历史和标签历史)类似于vue-routerAPI(推送、替换、返回)。所有组件默认都是异步加载的(当然你也可以改成同步的)可以使用单个tab刷新API列表inatabtoreplacebackinatabtobackcloseAll关闭所有tabcloseOthers关闭除当前tab之外的所有tabLabelreShow根据地址栏中的数据,echolabel和label中的componentquery得到推送,replacethepassedparameterinfotogetthecurrentlyactivetabobjecttips:更详细的API文档请看这里其他说明项目地址vue-multi-tab,如果觉得有用,给个star鼓励一下。因为我是一个讨厌记住一大堆API的人,所以我只提供了几个简单的可以满足大部分需求的。PI,目的是降低学习成本。如果您觉得无法满足您的需求,或者您在使用过程中发现了bug或问题,请在这里提交issue。个人精力有限,还有很多地方需要你们共同参与。如果有兴趣维护,欢迎pr。
