vue-multi-tab--一个让你在SPA里运用多页签的框架页

引见

vue-multi-tab 是一套基于 vueelement-ui 的 , 完成了 tab-router (一个基于 tab 的路由) 的 单页面, 多页签 应用程序.

我之前写这个项目标时刻,有写了一篇 记一次基于vue的spa多页签实践经验
然后就部份热情网友就在下面复兴了一些其他相似的项目,我一一查看了一下,发明基础都是基于 vue-routerkeep-alive 完成的,这类完成要领有两个比较显著的题目,第一是很难在页签内部跳转,比方我如今这个页签翻开的是组件a,然后点击组件a内里的某个链接,我想跳转到组件b,然则是须要在页签稳定的情况下翻开,不能在新的页签翻开,如许基于路由的就很难完成.
另一个题目就是 须要处置惩罚 keep-alive 的题目,有趟过 keep-alive 的坑的童鞋基础都相识,基于以上缘由,我决定给人人一个 不太一样的完成体式格局

那末我这个 vue-multi-tab 跟其他产品有什么差别呢?--除了完成多页签功用以为,我们另有许多跟其他同类产品差别的特征,以下.

在线预览

https://noahlam.github.io/vue-multi-tab/

重要特征:

  1. 能够在页签内像 vue-router 一样跳转组件
  2. 没有 keep-alive,所以也无需处置惩罚 keep-alive 题目
  3. 两重历史记录(页签内部历史记录和页签历史记录)
  4. 相似 vue-router 的 API(push,replace,back)
  5. 一切组件均默以为异步加载(固然你也能够改成同步的)
  6. 能够单 tab 革新

API 列表

  1. open 翻开一个页签
  2. close 封闭一个页签
  3. showTab 切换 tab
  4. push 标签内跳转
  5. replace 标签内替代
  6. back 标签内退却
  7. closeAll 封闭一切标签
  8. closeOthers 封闭除当前标签外的一切标签
  9. reShow 依据地点栏数据,回显标签和标签内的组件
  10. query 猎取 push,replace 通报的参数
  11. info 猎取 当前激活的 tab 对象

tips: 更细致的 API 文档请看
这里

其他申明

项目地点 vue-multi-tab,假如你以为有效,给个 star 勉励一下.

由于我自身就是个很憎恶记许多API的人,所以仅供应几个简朴又能满足绝大部份需求的API,目标就是为了下降进修本钱.

假如你以为没法满足你的需求或运用中发明 bug 或疑问 迎接 在这里提issue

个人精力有限,另有许多处所须要你的配合介入,假如你兴致一同保护,迎接 pr.

    原文作者:noahlam
    原文地址: https://segmentfault.com/a/1190000016035662
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞