vue-router-tab

Vue Router Tab

Vue Router Tab 是基于 Vue Router 的路由页签组件。

安装

npm

npm i vue-router-tab -S

yarn (推荐)

yarn add vue-router-tab

功能

• 响应路由变化来打开或切换页签
• 页签关闭和刷新，右键菜单操作
• 全局和针对特定路由的页签规则配置
• 初始页签数据，进入页面时默认显示的页签
• 内置页签和页面过渡效果，支持自定义配置
• 自定义页签模板
• 动态更新页签信息 (标题/图标/提示)
• 页签页面离开 (页签关闭/刷新/替换) 前确认
• 语言配置：zh-CN (默认) / en，自定义语言

文档：

https://bhuh12.github.io/vue-router-tab/

演示：

https://bhuh12.github.io/vue-router-tab/demo/

---

主流多页签方案的缺陷

目前主流的 Vue.js 多页签方案（参考文档），是基于 <keep-alive> 和 <router-view> 组件实现的，由于通过组件的 name 来控制缓存，该方案存在以下缺陷：

1. 配置繁杂：需要同时配置 route 和 页面组件的 name 并保持一致，还要确保 name 不重复

2. 同一个页面组件难以在不同的路由页签中独立缓存，不利于组件的复用

3. 页面缓存难以清理，需要通过各种钩子来更新页面数据

4. 无法定制页签打开的规则

另外还有一种方案，是弃用 Vue Router，自行实现路由和缓存控制。该方案需要使用其提供的 API 来控制页签打开和切换，对于现有的 Vue Router 项目引入改动量比较大。

---

Vue Router Tab 方案

针对现存方案的各种问题，Vue Router Tab 定制开发了 <router-alive> 缓存组件来控制路由页面缓存。除了解决了其他方案的不足，Vue Router Tab 还拥有以下优势：

1. Vue Router Tab 是完全响应 Vue Router 路由的。使用熟悉的 <router-link> 或者 router.push 等 api 即可方便的打开和切换页签，您可以使用 Vue Router 的完整功能。

2. Vue Router Tab 只依赖 Vue 和 Vue Router 。不会引入额外的依赖。

3. 配置简单，引入组件后通过路由的 meta 配置页签信息即可

4. 可以方便的定制页签的打开规则，精准控制路由页签

5. 丰富的选项提供你可能需要的额外功能和自定义配置

6. 提供完善的文档说明、代码示例和Demo演示

---

项目命令

插件打包

1. 更改 babel.config.js 中的 useBuiltIns 值为 false

2. 更改 package.json 中的 version

3. 执行命令 npm run lib:build

插件打包并生成报告

npm run lib:build:report

插件发布

npm run lib:publish

文档开发

npm run docs:dev

文档打包

npm run docs:build

Demo 演示开发

npm run demo:dev

Demo 演示打包

npm run demo:build

代码风格检查

npm run lint

代码风格检查并修复

npm run lint:fix