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

介绍

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

我之前写这个项目的时候,有写了一篇 记一次基于vue的spa多页签实践经验
然后就部分热心网友就在下面回复了一些其他类似的项目,我逐一查看了一下,发现基本都是基于 vue-router 和 keep-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

原文地址:https://www.cnblogs.com/noahnee/p/9487033.html

时间: 2024-11-10 04:20:40

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

(vue.js)Vue element tab 每个tab用一个路由来管理?

(vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词: 关于网友提出的“ (vue.js)Vue element tab 每个tab用一个路由来管理?”问题疑问,本网通过在网上对“ (vue.js)Vue element tab 每个tab用一个路由来管理?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下: 问题: (vue.js)Vue element tab 每个tab用一个

使用vue实现tab操作

在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item')     .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current$('.tab .content').find('.item')     .hide().eq(index)

记一次基于vue的spa多页签实践经验

前言 最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用,所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装 要求实现多页签,并且可以通过浏览器 url 回显多页签.而且页签内要维护一个历史记录,可以后退 组件要求异步加载,减少首屏加载时间. 很明显,这就是一个 类 ERP 的应用. 做过 JSP 等后台的同学,对多页签应该都很熟悉吧. 那接下来我们就来谈谈实现. 通用性高

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

vue中封装一个全局的弹窗js

/** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> */ showAlert:function(content,callback,singleButton){ if(typeof(content)=="string"){ if(callback){ if(singleButton){ // alert("内容加function两

如何用Express.js &amp; Vue.js 创建一个用比特币支付的在线商店!

#  如何用Express.js & Vue.js 创建一个用比特币支付的在线商店! 如果你想创建一个在线商店,并用比特币等加密货币来支付,那么这里提供了一个很好的解决方案.Express.js是一个轻量级 MVC架构的Web开发框架,适用于Web服务器端开发.Vue.js是一个渐进式的前端开发框架,你可以自由选择需要的模块集成了你的项目中.Mixin Payment是一个开源的,基于Mixin Network开发的加密货币支付方案. ## 准备工作: 先安装以下依赖包!- Go lang  1

Vue之tab简单切换实现

简单实现过程: 通过v-for实现tab页签,通过@click实现页签切换,通过:class实现绑定当前页,tab切换主要依靠组件component实现,每个页签切换时,不想让改变页签内容,可以用keep-alive实现.具体代码如下: <template> <div id="app"> <div class="radio-wrap"> <div class="radio-group" v-model=&

浅谈单页应用和多页应用——Vue.js向

浅谈单页应用和多页应用--Vue.js向 多页面 多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用. 在以往传统开发的应用(网站)大多都是多页面应用,路由由后端来写. 页面跳转=>返回HTML,优点:首屏时间快,SEO效果好,缺点是页面切换慢. 首屏时间快?访问页面,服务器只需要返回一个HTML文件,这个过程就经历了一个HTTP请求,请求响应回来,页面就能被展示出来. SEO(搜索引擎排名)效果好?搜索引擎能识别HTML的内容,根据内容进行排名. 页面切换慢:每一次切换