README.md 3.9 KB
介绍
Vue Router Tab 是基于 Vue Router 的路由页签组件，用来实现多页签页面的管理。
包含的功能
- 响应路由变化来打开或切换页签
- 页签右键菜单操作
- 页签规则配置
- 内置页签和页面过渡效果，支持自定义配置
- 自定义页签模板
- 初始页签数据，进入页面时默认显示的页签
- 动态更新页签信息 (标题/图标/提示)
- iframe 页签嵌入外部网站
- 页签页面离开 (页签关闭/刷新/替换) 前确认
- 多语言支持
主流多页签方案的缺陷
目前主流的 Vue.js 多页签方案（参考文档），是基于 <keep-alive> 和 <router-view> 组件实现的。由于通过组件的 name 来控制缓存，该方案存在以下缺陷：
配置繁杂：需要同时配置 route 和 页面组件的
name并保持一致，还要确保name不重复同一个页面组件难以在不同的路由页签中独立缓存，不利于组件的复用
页面缓存难以清理，需要通过各种钩子来更新页面数据
无法定制页签打开的规则
另外还看到一种方案，是弃用 Vue Router，自行实现路由和缓存控制。该方案需要使用其提供的 API 来控制页签打开和切换，对于现有的 Vue Router 项目引入改动量比较大。
Vue Router Tab 方案
针对现存方案的各种问题，Vue Router Tab 定制开发了 <router-alive> 缓存组件来控制路由页面缓存。除了解决了其他方案的不足，Vue Router Tab 还拥有以下优势：
Vue Router Tab是完全响应Vue Router路由的。使用熟悉的<router-link>或者router.push等 api 即可方便的打开和切换页签，您可以使用Vue Router的完整功能。Vue Router Tab只依赖Vue和Vue Router。不会引入额外的依赖。配置简单，引入组件后通过路由的
meta配置页签信息即可可以方便的定制页签的打开规则，精准控制路由页签
丰富的选项提供你可能需要的额外功能和自定义配置
提供完善的文档说明、代码示例和Demo演示
浏览器支持
 | IE / Edge | Firefox
 | Chrome
|---|
