vue-router-tab

Vue Router Tab

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

主流多页签方案的缺陷

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

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

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

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

4. 无法针对路由定制独立的页签规则

Vue Router Tab 方案

针对主流方案的各种问题，Vue Router Tab 定制开发了 <router-alive> 缓存组件来控制路由页面缓存。

功能

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

文档：

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

演示：

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

项目命令

插件打包

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