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

amc 发布于2019-08-05 18:06 / 542人阅读

摘要：介绍是一套基于和的实现了一个基于的路由的单页面多页签应用程序我之前写这个项目的时候有写了一篇记一次基于的多页签实践经验然后就部分热心网友就在下面回复了一些其他类似的项目我逐一查看了一下发现基本都是基于和实现的这种实现方法有两个比

介绍

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/

主要特性：

可以在页签内像 vue-router 一样跳转组件

没有 keep-alive,所以也无需处理 keep-alive 问题

双重历史记录(页签内部历史记录和页签历史记录)

类似 vue-router 的 API(push,replace,back)

所有组件均默认为异步加载(当然你也可以改成同步的)

可以单 tab 刷新

API 列表

open 打开一个页签

close 关闭一个页签

showTab 切换 tab

push 标签内跳转

replace 标签内替换

back 标签内后退

closeAll 关闭所有标签

closeOthers 关闭除当前标签外的所有标签

reShow 根据地址栏数据,回显标签和标签内的组件

query 获取 push,replace 传递的参数

info 获取当前激活的 tab 对象

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

其他说明

项目地址 vue-multi-tab,如果你觉得有用,给个 star 鼓励一下.

因为我本身就是个很讨厌记很多API的人,所以仅提供几个简单又能满足绝大部分需求的API,目的就是为了降低学习成本.

如果你觉得无法满足你的需求或使用中发现 bug 或疑问欢迎在这里提issue

个人精力有限,还有很多地方需要你的共同参与,如果你兴趣一起维护,欢迎 pr.

专线服务云服务器多页应用构建多页应用更新多页多行数据框架页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60529.html

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

摘要：介绍是一套基于和的实现了一个基于的路由的单页面多页签应用程序我之前写这个项目的时候有写了一篇记一次基于的多页签实践经验然后就部分热心网友就在下面回复了一些其他类似的项目我逐一查看了一下发现基本都是基于和实现的这种实现方法有两个比介绍 vue-multi-tab 是一套基于 vue 和 element-ui 的 , 实现了 tab-router (一个基于 tab 的路由) 的单页面...

netScorpion 2019-08-26 12:12 评论0 收藏0
记一次基于vue的spa多页签实践经验

摘要：然后类似一样我的命名是可以在页面的任何地方使用，如果你对具体的实现方法有兴趣，欢迎点击本文结尾的链接，去我的仓库上查看。前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装要求实现多页签,并且可以通过浏...

ispring 2019-08-26 12:13 评论0 收藏0
记一次基于vue的spa多页签实践经验

摘要：然后类似一样我的命名是可以在页面的任何地方使用，如果你对具体的实现方法有兴趣，欢迎点击本文结尾的链接，去我的仓库上查看。前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装要求实现多页签,并且可以通过浏...

张迁 2019-08-02 11:15 评论0 收藏0
canvas菜鸟基于小程序实现图案在线定制功能

摘要：多个页签的显示，其实不难，有现成的组件，于是老夫写代码就是一把梭，撸起袖子就是干，噼里啪啦一顿写，写完一测，没有任何问题，实在是不要太简单，丢给产品预览复制浏览器地址到别的地方粘贴，不能正确回显内需要实现跳转，而且要能返回。前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，...

darkerXi 2019-08-26 12:13 评论0 收藏0
canvas菜鸟基于小程序实现图案在线定制功能

摘要：多个页签的显示，其实不难，有现成的组件，于是老夫写代码就是一把梭，撸起袖子就是干，噼里啪啦一顿写，写完一测，没有任何问题，实在是不要太简单，丢给产品预览复制浏览器地址到别的地方粘贴，不能正确回显内需要实现跳转，而且要能返回。前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，...

lykops 2019-08-05 18:06 评论0 收藏0