V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
noahlam
V2EX  ›  JavaScript

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

  •  
  •   noahlam · 2018-08-16 14:40:43 +08:00 · 3009 次点击
    这是一个创建于 2052 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍

    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.

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5411 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 59ms · UTC 07:50 · PVG 15:50 · LAX 00:50 · JFK 03:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.