docs: 整理文档目录结构

README.md

@@ -46,7 +46,21 @@
 
 <h2 align="center">Vue Router Tab</h2>
 
-Vue Router Tab 是基于 `Vue Router` 的路由页签组件。
+Vue Router Tab 是基于 `Vue Router` 的路由页签组件，用来实现多页签页面的管理。
+
+
+## 功能
+
+- 响应路由变化来打开或切换页签
+- 页签右键菜单操作
+- [页签规则](https://bhuh12.github.io/vue-router-tab/guide/essentials/rule.html)配置
+- 内置页签和页面[过渡效果](https://bhuh12.github.io/vue-router-tab/guide/advanced/transition.html)，支持自定义配置
+- [自定义页签模板](https://bhuh12.github.io/vue-router-tab/guide/advanced/slot.html)
+- [初始页签数据](https://bhuh12.github.io/vue-router-tab/guide/advanced/initial-tabs.html)，进入页面时默认显示的页签
+- [动态更新页签信息](https://bhuh12.github.io/vue-router-tab/guide/advanced/dynamic-tab-info.html) (标题/图标/提示)
+- [iframe 页签嵌入外部网站](https://bhuh12.github.io/vue-router-tab/guide/essentials/iframe.html)
+- [页签页面离开 (页签关闭/刷新/替换) 前确认](https://bhuh12.github.io/vue-router-tab/guide/advanced/page-leave.html)
+- [多语言支持](https://bhuh12.github.io/vue-router-tab/guide/essentials/i18n.html)
 
 
 ## 安装
@@ -64,22 +78,17 @@ yarn add vue-router-tab
 ```
 
 
-## 功能
+## 文档：
+[https://bhuh12.github.io/vue-router-tab/](https://bhuh12.github.io/vue-router-tab/)
 
-- [x] 响应路由变化来打开或切换页签
-- [x] 页签关闭和刷新，右键菜单操作
-- [x] 全局和针对特定路由的[页签规则](docs/guide.md#页签规则)配置
-- [x] [初始页签数据](docs/guide.md#初始展示页签)，进入页面时默认显示的页签
-- [x] 内置页签和页面[过渡效果](docs/guide.md#过渡效果)，支持自定义配置
-- [x] [自定义页签模板](docs/guide.md#自定义页签模板)
-- [x] [动态更新页签信息](docs/guide.md#动态更新页签) (标题/图标/提示)
-- [x] [iframe 页签嵌入外部网站](docs/guide.md#iframe-页签操作)
-- [x] [页签页面离开 (页签关闭/刷新/替换) 前确认](docs/guide.md#页面离开确认)
-- [x] [语言配置](docs/guide.md#语言配置)：zh-CN (默认) / en，自定义语言
+  - 介绍：
+  [https://bhuh12.github.io/vue-router-tab/guide/](https://bhuh12.github.io/vue-router-tab/guide/)
 
+  - 安装：
+  [https://bhuh12.github.io/vue-router-tab/guide/installation.html](https://bhuh12.github.io/vue-router-tab/guide/installation.html)
 
-## 文档：
-[https://bhuh12.github.io/vue-router-tab/](https://bhuh12.github.io/vue-router-tab/)
+  - 入门：
+  [https://bhuh12.github.io/vue-router-tab/guide/essentials/](https://bhuh12.github.io/vue-router-tab/guide/essentials/)
 
 ## 演示：
 [https://bhuh12.github.io/vue-router-tab/demo/](https://bhuh12.github.io/vue-router-tab/demo/)
@@ -90,43 +99,6 @@ yarn add vue-router-tab
 ---
 
 
-## 主流多页签方案的缺陷
-
-目前主流的 `Vue.js` 多页签方案（[参考文档](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html#%E5%BF%AB%E6%8D%B7%E5%AF%BC%E8%88%AA-%E6%A0%87%E7%AD%BE%E6%A0%8F%E5%AF%BC%E8%88%AA)），是基于 `<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演示
-
-
----
-
-
 ## NPM 任务
 
 | 任务 | 命令 | 备注 |
@@ -134,8 +106,8 @@ yarn add vue-router-tab
 | **插件**：构建 | `npm run lib:build` |
 | **插件**：构建并生成报告 | `npm run lib:build:report` |
 | **插件**：发布 | `npm run lib:publish` | 操作前：更改 `package.json` 中的 `version` 为新的版本号 |
-| **Demo**： 开发 | `npm run demo:dev` |
-| **Demo**： 构建 | `npm run demo:build` |
+| **Demo**：开发 | `npm run demo:dev` |
+| **Demo**：构建 | `npm run demo:build` |
 | **文档**：开发 | `npm run docs:dev` |
 | **文档**：构建 | `npm run docs:build` |
 | **代码**风格：检查 | `npm run lint` |

docs/.vuepress/components/DocLinks.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="doc-links">
-    <router-link v-if="api" :to="'/api.html'+ api">查看API</router-link>
+    <router-link v-if="api" :to="'/api/'+ api">查看API</router-link>
     <demo-link v-if="demo" :href="demo">Demo演示</demo-link>
   </div>
 </template>

docs/.vuepress/config.js

@@ -16,20 +16,72 @@ module.exports = {
 
   // 主题配置
   themeConfig: {
-    // 页头
-    displayAllHeaders: true,
-
     // 页头导航
     nav: [
-      { text: '教程', link: '/guide.html' },
-      { text: 'API', link: '/api.html' },
+      { text: '教程', link: '/guide/' },
+      { text: 'API', link: '/api/' },
       { text: 'Demo', link: demoUrl },
       { text: '更新日志', link: 'https://github.com/bhuh12/vue-router-tab/releases' },
       { text: '主页', link: 'https://bhuh.net' }
     ],
 
+    // 侧边栏显示所有子集菜单 (默认显示活动)
+    // displayAllHeaders: true,
+
     // 侧边栏
-    sidebar: 'auto',
+    sidebar: {
+      '/guide/': [
+        '',
+        'installation',
+        {
+          title: '基础',
+          collapsable: false,
+          children: [
+            'essentials/',
+            'essentials/operate',
+            'essentials/iframe',
+            'essentials/rule',
+            'essentials/i18n'
+          ]
+        },
+        {
+          title: '进阶',
+          collapsable: false,
+          children: [
+            'advanced/transition',
+            'advanced/slot',
+            'advanced/initial-tabs',
+            'advanced/dynamic-tab-info',
+            'advanced/page-leave'
+          ]
+        }
+      ]
+    }/* [
+      '/guide/',
+      '/guide/installation',
+      {
+        title: '基础',
+        collapsable: false,
+        children: [
+          '/guide/essentials/',
+          '/guide/essentials/operate',
+          '/guide/essentials/rule',
+          '/guide/essentials/i18n'
+        ]
+      },
+      {
+        title: '进阶',
+        collapsable: false,
+        children: [
+          '/guide/advanced/',
+          '/guide/advanced/transition',
+          '/guide/advanced/slot',
+          '/guide/advanced/initial-tabs',
+          '/guide/advanced/dynamic-tab-info',
+          '/guide/advanced/page-leave'
+        ]
+      }
+    ] */,
 
     // Demo路径
     demoUrl: demoUrl,

docs/.vuepress/styles/index.styl

@@ -23,22 +23,18 @@ $color = #3eaf7c;
 
 // 站点名称前注入 logo
 .navbar .home-link
-  position relative
-  top -2px
-
   &::before
     $s = 1.3rem
     content ''
     display inline-block
     margin-right .3rem
+    margin-top .45rem
     width $s
     height $s
-    vertical-align middle
+    vertical-align: top
     background url(https://bhuh12.github.io/vue-router-tab/demo/img/logo.png)
     background-size cover
 
-  .site-name
-    vertical-align middle
 
 // Logo 图片
 .home .hero img

docs/README.md

@@ -4,7 +4,7 @@ heroImage: https://bhuh12.github.io/vue-router-tab/demo/img/logo.png
 heroText: Vue Router Tab
 tagline: 基于 Vue Router 的路由页签组件。
 actionText: 快速上手 →
-actionLink: ./guide.html
+actionLink: ./guide/
 features:
 - title: 简洁至上
   details: 配置简单，引入组件后通过路由的 "meta" 元信息配置页签信息即可运行。

docs/api.md → docs/api/README.md

@@ -1,3 +1,7 @@
+---
+sidebar: auto
+---
+
 # API 参考
 
 ## RouterTab Props
@@ -53,7 +57,7 @@
   
   - tabs子元素类型为 `String` 时，应配置为要打开页面的 `fullPath` ，页签的标题、图标、提示等信息会从对应页面的 `router` 配置中获取
 
-  - tabs子元素类型为 `Object` 时：
+  - tabs子元素类型为 `Object` 时: 
     
     - to: 页签路由地址，跟 `router.push` 的 `location` 参数一致，可以为 `fullPath`，也可以为 `location` 对象 - [参考文档](https://router.vuejs.org/zh/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)
     
@@ -66,7 +70,7 @@
 
 ### router-view
 
-**Vue Router Tab 内置 `<router-view>` 组件的配置**
+内置 `router-view` 组件的配置
 
 - 类型: `Object`
   
@@ -90,7 +94,7 @@
 
 ### page-transition
 
-**页面过渡效果**
+页面过渡效果
 
 - 类型: `String | Object`
   
@@ -106,46 +110,46 @@
 
 ### routerTab.activedTab
 
-当前激活的页签id
+当前激活的页签 id
 
 
 ## RouterTab 实例方法
 
 ::: tip
-在 Vue 实例内部，您可以通过 `this.$routerTab` 来访问路由页签实例。例如：调用 `this.$routerTab.close()` 来关闭当前页签。
+在 Vue 实例内部，您可以通过 `this.$routerTab` 来访问路由页签实例。例如: 调用 `this.$routerTab.close()` 来关闭当前页签。
 :::
 
 ### routerTab.close
 
-- **说明**：关闭指定 `location` 的页签
+关闭指定 `location` 的页签
 
-- **参数**：
+- 参数: 
   - `{String | Object} [location]` 路由地址 - [参考文档](https://router.vuejs.org/zh/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)
   - `{Boolean} [fullMatch = true]` 是否全匹配（匹配fullPath去除hash部分）
 
   
 ### routerTab.refresh
 
-- **说明**：刷新指定 `location` 的页签
+刷新指定 `location` 的页签
 
-- **参数**：
+- 参数: 
   - `{String | Object} [location]` 路由地址 - [参考文档](https://router.vuejs.org/zh/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)
   - `{Boolean} [fullMatch = true]` 是否全匹配（匹配fullPath去除hash部分）
 
 
 ### routerTab.refreshAll
 
-- **说明**：刷新所有页签
+刷新所有页签
 
-- **参数**：
+- 参数: 
   - `{Boolean} [force = false]` 如果 `force` 为 `true`，则忽略页面组件的 `beforePageLeave` 配置，强制刷新所有页签
 
 
 ### routerTab.openIframeTab
 
-- **说明**：打开 iframe 页签
+打开 iframe 页签
 
-- **参数**：
+- 参数: 
   - `{String} [src]` 要打开的 iframe 页签链接
   - `{String} [title]` 页签标题
   - `{String} [icon]` 页签图标
@@ -153,17 +157,17 @@
 
 ### routerTab.closeIframeTab
 
-- **说明**：关闭 iframe 页签
+关闭 iframe 页签
 
-- **参数**：
+- 参数: 
   - `{String} [src]` 要关闭的 iframe 页签链接
 
 
 ### routerTab.refreshIframeTab
 
-- **说明**：刷新 iframe 页签
+刷新 iframe 页签
 
-- **参数**：
+- 参数: 
   - `{String} [src]` 要刷新的 iframe 页签链接
 
 
@@ -174,25 +178,29 @@
 
 ### meta.title
 
-- 类型: `String`
+页签标题
+
+- 类型: `String | Array`
 - 默认值: `'新页签'`
 
-页签标题
+该字段支持国际化配置，参考: [教程 - 多语言支持](../guide/essentials/i18n.md)
 
 
 ### meta.icon
 
-- 类型: `String`
-
 页签图标
 
+- 类型: `String`
+
 
 ### meta.tips
 
-- 类型: `String`
+页签提示
+
+- 类型: `String | Array`
 - 默认值: 默认和页签标题 `meta.title` 保持一致
 
-页签提示
+该字段支持国际化配置，参考: [教程 - 多语言支持](../guide/essentials/i18n.md)
 
 
 ### meta.aliveId
@@ -209,13 +217,13 @@
 
 ### beforePageLeave
 
-  - **说明**: 页面离开确认。页面组件选项，与 `data`, `methods` 并列
+页面离开确认。页面组件选项，与 `data`, `methods` 并列
  
-  - **参数**: 
-    - `{Function} resolve` 执行后允许离开页签
-    - `{Function} reject` 执行后阻止离开页签
-    - `{Object} tab` 页签信息
-    - `{String} type` 离开类型：`close`: '关闭', `refresh`: '刷新', `replace`: '替换'
+- 参数: 
+  - `{Function} resolve` 执行后允许离开页签
+  - `{Function} reject` 执行后阻止离开页签
+  - `{Object} tab` 页签信息
+  - `{String} type` 离开类型: `close`: '关闭', `refresh`: '刷新', `replace`: '替换'
 
 
 ### vm.$routerTab
@@ -229,8 +237,8 @@
 
 ### vm._isRouterPage
 
-**是否是路由页面**：在通过 `RouterTab` 加载的页面组件内部，访问 `this._isRouterPage` 会返回 `true`
+**是否是路由页面**: 在通过 `RouterTab` 加载的页面组件内部，访问 `this._isRouterPage` 会返回 `true`
 
 ::: tip
-应用：在需要给路由页面添加全局混入 `mixin` 时，可在生命周期钩子（ `created` 之后）里判断 `this._isRouterPage`
+应用: 在需要给路由页面添加全局混入 `mixin` 时，可在生命周期钩子（ `created` 之后）里判断 `this._isRouterPage`
 :::

docs/guide.md

@@ -1,682 +0,0 @@
-
-# 教程
-
-## 安装
-
-### npm
-
-``` bash
-npm i vue-router-tab -S
-```
-
-### yarn (推荐)
-
-``` bash
-yarn add vue-router-tab
-```
-
-## 基础
-
-### 引入组件
-
-**示例：**
-
-``` javascript {8,9,15}
-// @/main.js 入口
-
-// router-tab 组件依赖 vue 和 vue-router
-import Vue from 'vue'
-import Router from 'vue-router'
-
-// 引入组件和样式
-import RouterTab from 'vue-router-tab'
-import 'vue-router-tab/dist/lib/vue-router-tab.css'
-
-import App from './App.vue'
-import router from './router'
-
-Vue.config.productionTip = false
-Vue.use(RouterTab)
-
-new Vue({
-  router,
-  render: (h) => h(App)
-}).$mount('#app')
-
-```
-
-### 应用组件
-
-配置参考: [RouterTab Props](api.md#routertab-props)
-
-::: danger
-`RouterTab` 仅支持单例模式，请勿在同一个页面中引入多个 `RouterTab` 组件！
-:::
-
-**示例：**
-
-``` html {6}
-<!-- @/components/layout/Frame.vue 布局框架 -->
-<template>
-  <div class="app-header">头部</div>
-  <div class="app-body">
-    <div class="app-side">侧边栏</div>
-    <router-tab/>
-  </div>
-</template>
-```
-
-### 路由配置
-
-1. 引入 `RouterTab` 内置路由以支持[操作 iframe 页签](#iframe-页签操作)
-2. 通过路由的 `meta` 信息，来设置页签的**标题**、**图标**、**提示**和**路由页签规则**
-
-配置参考: [Route.meta 路由元信息](api.md#route-meta-路由元信息)
-
-**示例：**
-
-``` javascript {6,9,22,25,28,33,34,35,36}
-// @/router.js 路由
-import Vue from 'vue'
-import Router from 'vue-router'
-
-// RouterTab 内置路由
-import { RouterTabRoutes } from 'vue-router-tab'
-
-// 引入布局框架组件
-import Frame from './components/layout/Frame.vue'
-
-// 异步加载页面组件
-const importPage = view => () => import(/* webpackChunkName: "p-[request]" */ `./views/${view}.vue`)
-
-Vue.use(Router)
-
-export default new Router({
-  routes: [{
-    path: '/',
-    redirect: '/page1',
-
-    // 父路由组件内必须包含 <router-tab>
-    component: Frame,
-
-    // 子路由里配置需要通过页签打开的页面路由
-    children: [
-
-      // 引入 RouterTab 内置路由以支持操作 iframe 页签
-      ...RouterTabRoutes,
-      {
-        path: '/page/:id',
-        component: importPage('Page'),
-        meta: {
-          title: '页面', // 页签标题
-          icon: 'icon-user', // 页签图标，可选
-          tips: '这是一个页面', // 页签提示，可选，如未设置则跟title一致
-          aliveId: 'fullPath', // 路由打开页签规则，可选
-        }
-      },
-      {
-        path: '/404',
-        component: importPage('404'),
-        meta: {
-          title: '找不到页面',
-          icon: 'icon-page'
-        }
-      },
-      {
-        path: '*',
-        redirect: '/404'
-      }
-    ]
-}
-```
-
-## 页签操作
-
-### 打开/切换页签
-
-`RouterTab` 通过响应路由变化来新增或切换页签，直接使用 `vue-router` 提供的方法即可。
-
-参考文档：[Vue Router 导航](https://router.vuejs.org/zh/guide/essentials/navigation.html)
-
-<doc-links demo="/default/"></doc-links>
-
-1. **`router-link` 组件方式**
-
-  打开和切换到页签
-  
-  ``` html
-  <router-link to="/page/1">页面1</router-link>
-  ```
-
-  全新打开页签 (**刷新已有页签**)
-
-  ``` html
-  <router-link to="/page/2" @click.native="$routerTab.refresh('/page/2')">页面2”<router-link>
-  ```
-
-2. **通过 `router.push`、`router.replace`、`router.go`**
-
-  注意：在 Vue 实例内部，您可以通过 $router 访问路由实例。因此您可以调用 this.$router.push。
-
-  ``` javascript
-  // 如果需要全新打开请加上：
-  // this.$routerTab.refresh('/page/1')
-  this.$router.push('/page/1')
-  ```
-
-### 关闭页签
-
-您可以通过 `RouterTab` 的实例方法 [`routerTab.close(location, fullMatch?)`](api.md#routertab-close) 来关闭页签
-
-::: tip
-1. 在 Vue 实例内部，您可以通过 `$routerTab` 访问路由页签实例。因此您可以调用 `this.$routerTab.close`。
-
-2. 当 `RouterTab` 组件只有一个页签，或者初始页签的 `closable` 配置为 `false`，页签关闭操作将不生效。
-:::
-
-<doc-links api="#routertab-close" demo="/default/"></doc-links>
-
-**关闭当前页签**
-
-``` js
-this.$routerTab.close()
-```
-
-**关闭指定页签**
-``` js
-// 关闭指定 fullPath 的页签
-this.$routerTab.close('/page/1')
-
-// 关闭指定 location 的页签
-this.$routerTab.close({
-  name: 'page',
-  params: {
-    id: 2
-  }
-})
-```
-
-**模糊关闭页签**
-``` js
-// 关闭与给定地址共用页签的地址，即使地址不完全匹配
-// 默认 `alive-id` 规则下，类似 '/page/1?query=2' 这样的页签也能被匹配关闭
-this.$routerTab.close('/page/1', false)
-```
-
-
-### 刷新页签
-
-您可以通过 `RouterTab` 的实例方法 [`routerTab.refresh(location, fullMatch?)`](api.md#routertab-refresh) 来刷新页签
-
-<doc-links api="#routertab-refresh" demo="/default/"></doc-links>
-
-**刷新当前页签**
-
-``` js
-this.$routerTab.refresh()
-```
-
-**刷新指定页签**
-``` js
-// 刷新指定 fullPath 的页签
-this.$routerTab.refresh('/page/1')
-
-// 刷新指定 location 的页签
-this.$routerTab.refresh({
-  name: 'page',
-  params: {
-    id: 2
-  }
-})
-```
-
-**模糊刷新页签**
-``` js
-// 刷新与给定地址共用页签的地址，即使地址不完全匹配
-// 默认 `alive-id` 规则下，类似 '/page/1?query=2' 这样的页签也能被匹配刷新
-this.$routerTab.close('/page/1', false)
-```
-
-### 刷新所有页签
-
-您可以通过 `RouterTab` 的实例方法 [`routerTab.refreshAll(force?)`](api.md#routertab-refreshall) 来刷新所有页签
-
-**刷新所有页签**
-
-``` js
-this.$routerTab.refreshAll()
-```
-
-**强制刷新所有页签**，忽略页面组件的 `beforePageLeave` 配置
-
-``` js
-this.$routerTab.refreshAll(true)
-```
-
-### iframe 页签操作
-
-`RouterTab` 支持通过 iframe 页签嵌入外部网站。
-
-::: warning
-该功能需要引入 `RouterTab` 内置路由，请参考 [基础 - 路由配置](#路由配置)
-:::
-
-<doc-links api="#routertab-openiframetab" demo="/default/"></doc-links>
-
-**打开 iframe 页签**
-
-``` js
-// 三个参数分别为：链接、页签标题、图标
-this.$routerTab.openIframeTab('https://www.baidu.com', '百度', 'icon-web')
-```
-
-**关闭 iframe 页签**
-
-``` js
-this.$routerTab.closeIframeTab('https://www.baidu.com')
-```
-
-**刷新 iframe 页签**
-
-``` js
-this.$routerTab.refreshIframeTab('https://www.baidu.com')
-```
-
-
-## i18n
-
-### 页签国际化
-
-`router-tab` 组件提供了 `i18n` 属性，用以配置自定义的国际化转换方法，从而实现路由页签的多语言展示。
-
-目前支持国际化的字段有：页签的 `title` 和 `tips`。
-
-组件提供两种方式定义国际化字段：
-
-- `'i18n:custom.i18n.key'`: 字符串方式， `i18n:` 前缀 + 国际化字段的 `key`
-
-- `['custom.i18n.key', ...params]`: 数组方式，第一项为国际化字段的 `key`，后面为参数列表。适用于动态的国际化内容。
-  - 参考: [动态更新页签](#动态更新页签)
-
-
-<doc-links api="#i18n" demo="/i18n/"></doc-links>
-
-**配置自定义国际化方法**
-
-``` html
-<template>
-  <router-tab :i18n="i18n" />
-</template>
-
-<script>
-export default {
-  methods: {
-    // 自定义国际化转换方法
-    i18n (key, params) {
-      // $getI18n 为项目的公共国际化方法
-      return this.$getI18n(key, params)
-    }
-  }
-}
-</script>
-```
-
-**路由配置国际化页签**
-``` javascript {5}
-{
-  path: '/page1',
-  component: pageComponent,
-  meta: {
-    title: 'i18n:routerTab.page1', // 通过配置 'i18n:key' 的方式来设置国际化字段 'routerTab.page1'
-    icon: 'icon-user', // 页签图标，可选
-    tips: 'i18n:routerTab.page1Tips', // 页签提示同样支持国际化
-  }
-}
-```
-
-
-
-### 组件语言
-
-通过配置 `router-tab` 组件的 `language` 属性，可以设置组件显示的语言 (主要表现为页签右键菜单)。
-
-
-`RouterTab` 默认语言是 `zh-CN`，另外内置了 `en`。
-
-<doc-links api="#language" demo="/lang-en/"></doc-links>
-
-**指定组件显示为英文**
-
-``` html
-<router-tab language="en"/>
-```
-
-**自定义的语言** ([参考配置](https://github.com/bhuh12/vue-router-tab/blob/dev/src/lib/RouterTab/lang/en.js))
-
-``` html
-<router-tab :language="customLanguage"/>
-```
-
-``` javascript
-export default {
-  data () {
-    return {
-      customLanguage: {
-        ...
-      }
-    }
-  }
-}
-```
-
-
-## 页签规则
-
-不同的页签维护着各自的页面缓存，而**页签规则**定义了不同的路由**打开页签的方式**。
-
-
-### 内置规则
-
-- `path` (默认规则)
-  - 规则：`route => route.path` 
-  - 说明：相同route.params的路由共用页签
-  - <demo-link href="/default/rule/a/1"/>
-
-- `fullPath`
-  - 规则：`route => route.fullPath.replace(route.hash, '')` 
-  - 说明：相同route.params和route.query的路由共用页签
-  - <demo-link href="/global-rule/rule/a/1"/>
-
-
-### 全局页签规则
-
-通过配置 `router-tab` 组件的 `alive-id` 属性，您可以定义全局的页签规则
-
-<doc-links api="#alive-id" demo="/global-rule/rule/a/1"></doc-links>
-
-**示例：**
-
-``` html
-<router-tab :alive-id="route => route.fullPath.replace(route.hash, '')"/>
-```
-
-例子中，配置 `alive-id` 为 `fullPath` 去除 `hash` 部分。
-
-根据该规则，`page/1` 和 `page/1?query=2`、`page/2`、`page/2?query=2` 这四个地址都是打开**不同**的页签。而 `page/1` 和 `page/1#hash1` 是同一个页签，因为它们忽略 `hash` 后的路径一致。
-
-该规则已经内置在 `RouterTab` 中了，因此，您也可以直接这样使用：
-
-``` html
-<router-tab alive-id="fullPath"/>
-```
-
-
-### 路由页签规则
-
-通过配置**路由**的 `meta.aliveId` 属性，您可以针对特定路由定制页签规则
-
-<doc-links api="#meta-aliveid" demo="/default/route-rule/a/1"></doc-links>
-
-**示例：**
-
-``` javascript {8,9,10}
-const route = {
-  path: '/my-page/:catalog/:type',
-  component: {
-    template: '<div>定制规则：{{$route.params.catalog}}/{{$route.params.type}}</div>'
-  },
-  meta: {
-    title: '定制规则',
-    aliveId (route) {
-      return `/my-page/${route.params.catalog}`
-    }
-  }
-}
-```
-
-根据示例中的页签规则，`/my-page/a/1` 和 `/my-page/a/2` 打开的是**同一个**页签。而 `/my-page/b/1` 和 `/my-page/b/2` 则打开另外一个页签
-
-
-## 进阶
-
-前面的内容已经能满足大部分使用场景了，您还可以根据下面的内容实现更多功能。
-
-
-### 过渡效果
-
-您可以通过配置 `router-tab` 组件的 `tab-transition` 和 `page-transition` 属性，分别替换默认的**页签**和**页面**过渡效果
-
-::: warning
-- 如果是组件作用域内的 CSS(配置了 `scoped`)，需要在选择器前添加 `/deep/`才能生效
-
-- 页签项 `.router-tab-item` 默认设置了 `transition` 和 `transform-origin` 的样式，您可能需要覆盖它已避免影响到自定义的过渡效果
-:::
-
-<doc-links api="#tab-transition" demo="/transition/"></doc-links>
-
-**页签过渡效果-示例：**
-
-``` html {2,6}
-<template>
-  <router-tab tab-transition="tab-scale"/>
-</template>
-
-<style lang="scss" scoped>
-/deep/ .tab-scale {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity .5s, transform .5s;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-    transform: scale(1.5);
-  }
-}
-</style>
-```
-
-<doc-links api="#page-transition" demo="/transition/"></doc-links>
-
-**页面过渡效果-示例：**
-
-``` html {2,6}
-<template>
-  <router-tab page-transition="page-fade"/>
-</template>
-
-<style lang="scss" scoped>
-/deep/ .page-fade {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity .5s;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-</style>
-```
-
-#### 详细配置
-
-您还可以使用对象的方式设置 `tab-transition` 和 `page-transition` 的值，以实现详细的过渡效果配置
-
-配置参考: [Vue - transition](https://cn.vuejs.org/v2/api/#transition)
-
-``` html
-<router-tab :tab-transition="{
-  name: 'my-transition',
-  'enter-class': 'my-transition-enter'
-}"/>
-```
-
-
-### 自定义页签模板
-
-通过 `router-tab` 组件的默认作用域插槽，我们可以自定义页签显示的内容
-
-插槽的作用域提供以下属性供模板使用：
-  - **tab** {Object} 页签项信息，包括 `id`, `title`, `icon`, `closable` 等
-  - **tabs** {Array} 页签列表
-  - **index** {Number} 索引
-
-<doc-links demo="/slot/"></doc-links>
-
-**示例：**
-
-``` html {2}
-<router-tab>
-  <template v-slot="{ tab: { id, title, icon, closable }, tabs, index}">
-    <i v-if="icon" class="tab-icon" :class="icon"></i>
-    <span class="tab-title">{{title || '未命名页签'}}</span>
-    <span class="tab-badge">{{index}}</span>
-    <i class="tab-close el-icon-close" v-if="closable !== false &&tabs.length > 1" @click.prevent="$routerTab.close(id)"></i>
-  </template>
-</router-tab>
-```
-
-
-### 初始展示页签
-
-通过配置 `router-tab` 组件的 `tabs` 属性，可以设置进入页面时默认显示的页签。
-
-<doc-links api="#tabs" demo="/initial-tabs/"></doc-links>
-
-**示例：**
-
-  ``` html
-  <router-tab :tabs="tabs"/>
-  ```
-
-  ``` javascript {7,10,13,16,17,18,19,20,21,22}
-  export default {
-    data () {
-      return {
-        // 默认页签项
-        tabs: [
-          // 推荐 fullPath 方式配置默认页签项。RouterTab 会自动获取路由里的页签配置
-          '/page/1',
-
-          // 设置初始 title，用于需要动态更新页签信息的路由页面
-          { to: '/page/2', title: '页面2', icon: 'icon-page' },
-
-          // 设置 closable 为 false，可以禁止页签被关闭
-          { to: '/page/3', closable: false },
-
-          // 也可以 location 方式设置默认页签项
-          {
-            to: {
-              name: 'page',
-              params: { id: 4 },
-              query: { t: 2 }
-            }
-          },
-          
-          // 此页面与'/page/2'的aliveId一致，将只保留先设置的页签
-          { to: '/page/2?t=1', title: '页面2-1' }
-        ]
-      }
-    }
-  }
-  ```
-
-### 动态更新页签
-
-`RouterTab` 会监听组件 `this.routeTab` 来动态更新页签信息。您可以通过设置 `this.routeTab` 来更改页签的标题、图标、提示。
-
-<doc-links demo="/default/tab-dynamic"></doc-links>
-
-**示例：**
-
-``` javascript {7,15,18,27}
-export default {
-  name: 'goods',
-  data () {
-    return {
-      goodsName: '商品名',
-      goodsDesc: '商品简介',
-      routeTab: null // routeTab 存放在 data 中以支持响应
-    }
-  },
-  mounted () {
-    setTimeout(() => {
-      let { id } = this.$route.params
-
-      // 只更新页签标题
-      this.routeTab = `页面${id}动态标题`
-
-      // 更新多个页签信息
-      this.routeTab = {
-        title: `商品-${this.goodsName}`,
-        icon: 'el-icon-goods',
-        tips: this.goodsDesc
-      }
-
-      // 国际化页签标题
-      this.routeTab = {
-        // 以数组方式定义带参数列表的国际化，格式：['i18nKey', ...params]
-        title: ['routerTab.goods', this.goodsName]
-      }
-      
-    }, 300)
-  }
-}
-```
-
-
-### 页面离开确认
-
-当页签**关闭**、**刷新**或**替换**时会触发 `beforePageLeave`，通过 `Promise` 的 `resolve` 和 `reject` 来允许或者阻止页签页面的离开。
-
-::: warning
-
-- `beforePageLeave` 在组件的最外层，不是放在 `methods` 里
-
-- 如果还需要在浏览器页面关闭或刷新前阻止，请使用 
-[`onbeforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload)
-:::
-
-<doc-links demo="/initial-tabs/page-leave"></doc-links>
-
-**示例：**
-
-``` javascript {3,15,21,23,28}
-export default {
-  // 页面离开前确认
-  beforePageLeave (resolve, reject, tab, type) {
-    // 离开类型
-    const action = {
-      close: '关闭',
-      refresh: '刷新',
-      replace: '替换'
-    }[type]
-
-    const msg = `您确认要${action}页签“${tab.title}”吗？`
-
-    // 值未改变，则直接离开页签
-    if (this.editValue === this.value) {
-      resolve()
-      return
-    }
-
-    // 值改变则确认提示
-    if (confirm(msg)) {
-      resolve()
-    } else {
-      reject('拒绝了页面离开')
-    }
-
-    /*
-    // 此处使用了 Element 的 confirm 组件
-    // 需将 closeOnHashChange 配置为 false，以避免路由切换导致确认框关闭
-    this.$confirm(msg, '提示', { closeOnHashChange: false })
-      .then(resolve)
-      .catch(reject)
-    */
-  }
-}
-```

docs/guide/README.md

@@ -0,0 +1,59 @@
+# 介绍
+
+Vue Router Tab 是基于 `Vue Router` 的路由页签组件，用来实现多页签页面的管理。
+
+### 包含的功能
+
+- 响应路由变化来打开或切换页签
+- 页签右键菜单操作
+- [页签规则](essentials/rule.md)配置
+- 内置页签和页面[过渡效果](advanced/transition.md)，支持自定义配置
+- [自定义页签模板](advanced/slot.md)
+- [初始页签数据](advanced/initial-tabs.md)，进入页面时默认显示的页签
+- [动态更新页签信息](advanced/dynamic-tab-info.md) (标题/图标/提示)
+- [iframe 页签嵌入外部网站](essentials/iframe.md)
+- [页签页面离开 (页签关闭/刷新/替换) 前确认](advanced/page-leave.md)
+- [多语言支持](essentials/i18n.md)
+
+
+### 主流多页签方案的缺陷
+
+目前主流的 `Vue.js` 多页签方案（[参考文档](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html#%E5%BF%AB%E6%8D%B7%E5%AF%BC%E8%88%AA-%E6%A0%87%E7%AD%BE%E6%A0%8F%E5%AF%BC%E8%88%AA)），是基于 `<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演示
+
+---
+
+
+### 浏览器支持
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
+| --------- | --------- | --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions

docs/guide/advanced/dynamic-tab-info.md

@@ -0,0 +1,42 @@
+# 动态更新页签
+
+`RouterTab` 会监听组件 `this.routeTab` 来动态更新页签信息。您可以通过设置 `this.routeTab` 来更改页签的标题、图标、提示。
+
+<doc-links demo="/default/tab-dynamic"></doc-links>
+
+**示例：**
+
+``` javascript {7,15,18,27}
+export default {
+  name: 'goods',
+  data () {
+    return {
+      goodsName: '商品名',
+      goodsDesc: '商品简介',
+      routeTab: null // routeTab 存放在 data 中以支持响应
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      let { id } = this.$route.params
+
+      // 只更新页签标题
+      this.routeTab = `页面${id}动态标题`
+
+      // 更新多个页签信息
+      this.routeTab = {
+        title: `商品-${this.goodsName}`,
+        icon: 'el-icon-goods',
+        tips: this.goodsDesc
+      }
+
+      // 国际化页签标题
+      this.routeTab = {
+        // 以数组方式定义带参数列表的国际化，格式：['i18nKey', ...params]
+        title: ['routerTab.goods', this.goodsName]
+      }
+      
+    }, 300)
+  }
+}
+```

docs/guide/advanced/initial-tabs.md

@@ -0,0 +1,43 @@
+# 初始展示页签
+
+通过配置 `router-tab` 组件的 `tabs` 属性，可以设置进入页面时默认显示的页签。
+
+<doc-links api="#tabs" demo="/initial-tabs/"></doc-links>
+
+**示例：**
+
+  ``` html
+  <router-tab :tabs="tabs"/>
+  ```
+
+  ``` javascript {7,10,13,16,17,18,19,20,21,22}
+  export default {
+    data () {
+      return {
+        // 默认页签项
+        tabs: [
+          // 推荐 fullPath 方式配置默认页签项。RouterTab 会自动获取路由里的页签配置
+          '/page/1',
+
+          // 设置初始 title，用于需要动态更新页签信息的路由页面
+          { to: '/page/2', title: '页面2', icon: 'icon-page' },
+
+          // 设置 closable 为 false，可以禁止页签被关闭
+          { to: '/page/3', closable: false },
+
+          // 也可以 location 方式设置默认页签项
+          {
+            to: {
+              name: 'page',
+              params: { id: 4 },
+              query: { t: 2 }
+            }
+          },
+          
+          // 此页面与'/page/2'的aliveId一致，将只保留先设置的页签
+          { to: '/page/2?t=1', title: '页面2-1' }
+        ]
+      }
+    }
+  }
+  ```

docs/guide/advanced/page-leave.md

@@ -0,0 +1,52 @@
+# 页面离开确认
+
+当页签**关闭**、**刷新**或**替换**时会触发 `beforePageLeave`，通过 `Promise` 的 `resolve` 和 `reject` 来允许或者阻止页签页面的离开。
+
+::: warning
+
+- `beforePageLeave` 在组件的最外层，不是放在 `methods` 里
+
+- 如果还需要在浏览器页面关闭或刷新前阻止，请使用 
+[`onbeforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload)
+:::
+
+<doc-links demo="/initial-tabs/page-leave"></doc-links>
+
+**示例：**
+
+``` javascript {3,15,21,23,28}
+export default {
+  // 页面离开前确认
+  beforePageLeave (resolve, reject, tab, type) {
+    // 离开类型
+    const action = {
+      close: '关闭',
+      refresh: '刷新',
+      replace: '替换'
+    }[type]
+
+    const msg = `您确认要${action}页签“${tab.title}”吗？`
+
+    // 值未改变，则直接离开页签
+    if (this.editValue === this.value) {
+      resolve()
+      return
+    }
+
+    // 值改变则确认提示
+    if (confirm(msg)) {
+      resolve()
+    } else {
+      reject('拒绝了页面离开')
+    }
+
+    /*
+    // 此处使用了 Element 的 confirm 组件
+    // 需将 closeOnHashChange 配置为 false，以避免路由切换导致确认框关闭
+    this.$confirm(msg, '提示', { closeOnHashChange: false })
+      .then(resolve)
+      .catch(reject)
+    */
+  }
+}
+```

docs/guide/advanced/slot.md

@@ -0,0 +1,23 @@
+# 自定义页签模板
+
+通过 `router-tab` 组件的默认作用域插槽，我们可以自定义页签显示的内容
+
+插槽的作用域提供以下属性供模板使用：
+  - **tab** {Object} 页签项信息，包括 `id`, `title`, `icon`, `closable` 等
+  - **tabs** {Array} 页签列表
+  - **index** {Number} 索引
+
+<doc-links demo="/slot/"></doc-links>
+
+**示例：**
+
+``` html {2}
+<router-tab>
+  <template v-slot="{ tab: { id, title, icon, closable }, tabs, index}">
+    <i v-if="icon" class="tab-icon" :class="icon"></i>
+    <span class="tab-title">{{title || '未命名页签'}}</span>
+    <span class="tab-badge">{{index}}</span>
+    <i class="tab-close el-icon-close" v-if="closable !== false &&tabs.length > 1" @click.prevent="$routerTab.close(id)"></i>
+  </template>
+</router-tab>
+```

docs/guide/advanced/transition.md

@@ -0,0 +1,71 @@
+# 过渡效果
+
+您可以通过配置 `router-tab` 组件的 `tab-transition` 和 `page-transition` 属性，分别替换默认的**页签**和**页面**过渡效果
+
+::: warning
+- 如果是组件作用域内的 CSS(配置了 `scoped`)，需要在选择器前添加 `/deep/`才能生效
+
+- 页签项 `.router-tab-item` 默认设置了 `transition` 和 `transform-origin` 的样式，您可能需要覆盖它已避免影响到自定义的过渡效果
+:::
+
+<doc-links api="#tab-transition" demo="/transition/"></doc-links>
+
+## 页签过渡效果
+
+``` html {2,6}
+<template>
+  <router-tab tab-transition="tab-scale"/>
+</template>
+
+<style lang="scss" scoped>
+/deep/ .tab-scale {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity .5s, transform .5s;
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(1.5);
+  }
+}
+</style>
+```
+
+<doc-links api="#page-transition" demo="/transition/"></doc-links>
+
+## 页面过渡效果
+
+``` html {2,6}
+<template>
+  <router-tab page-transition="page-fade"/>
+</template>
+
+<style lang="scss" scoped>
+/deep/ .page-fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity .5s;
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+</style>
+```
+
+## 详细配置
+
+您还可以使用对象的方式设置 `tab-transition` 和 `page-transition` 的值，以实现详细的过渡效果配置
+
+配置参考: [Vue - transition](https://cn.vuejs.org/v2/api/#transition)
+
+``` html
+<router-tab :tab-transition="{
+  name: 'my-transition',
+  'enter-class': 'my-transition-enter'
+}"/>
+```

docs/guide/essentials/README.md

@@ -0,0 +1,115 @@
+
+# 入门
+
+## 引入组件
+
+**示例：**
+
+``` javascript {8,9,15}
+// @/main.js 入口
+
+// router-tab 组件依赖 vue 和 vue-router
+import Vue from 'vue'
+import Router from 'vue-router'
+
+// 引入组件和样式
+import RouterTab from 'vue-router-tab'
+import 'vue-router-tab/dist/lib/vue-router-tab.css'
+
+import App from './App.vue'
+import router from './router'
+
+Vue.config.productionTip = false
+Vue.use(RouterTab)
+
+new Vue({
+  router,
+  render: (h) => h(App)
+}).$mount('#app')
+
+```
+
+## 应用组件
+
+配置参考: [RouterTab Props](../../api/README.md#routertab-props)
+
+::: danger
+`RouterTab` 仅支持单例模式，请勿在同一个页面中引入多个 `RouterTab` 组件！
+:::
+
+**示例：**
+
+``` html {6}
+<!-- @/components/layout/Frame.vue 布局框架 -->
+<template>
+  <div class="app-header">头部</div>
+  <div class="app-body">
+    <div class="app-side">侧边栏</div>
+    <router-tab/>
+  </div>
+</template>
+```
+
+## 路由配置
+
+1. 引入 `RouterTab` 内置路由以支持[操作 iframe 页签](operate.md#iframe-页签操作)
+2. 通过路由的 `meta` 信息，来设置页签的**标题**、**图标**、**提示**和**路由页签规则**
+
+配置参考: [Route.meta 路由元信息](../../api/README.md#route-meta-路由元信息)
+
+**示例：**
+
+``` javascript {6,9,22,25,28,33,34,35,36}
+// @/router.js 路由
+import Vue from 'vue'
+import Router from 'vue-router'
+
+// RouterTab 内置路由
+import { RouterTabRoutes } from 'vue-router-tab'
+
+// 引入布局框架组件
+import Frame from './components/layout/Frame.vue'
+
+// 异步加载页面组件
+const importPage = view => () => import(/* webpackChunkName: "p-[request]" */ `./views/${view}.vue`)
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [{
+    path: '/',
+    redirect: '/page1',
+
+    // 父路由组件内必须包含 <router-tab>
+    component: Frame,
+
+    // 子路由里配置需要通过页签打开的页面路由
+    children: [
+
+      // 引入 RouterTab 内置路由以支持操作 iframe 页签
+      ...RouterTabRoutes,
+      {
+        path: '/page/:id',
+        component: importPage('Page'),
+        meta: {
+          title: '页面', // 页签标题
+          icon: 'icon-user', // 页签图标，可选
+          tips: '这是一个页面', // 页签提示，可选，如未设置则跟title一致
+          aliveId: 'fullPath', // 路由打开页签规则，可选
+        }
+      },
+      {
+        path: '/404',
+        component: importPage('404'),
+        meta: {
+          title: '找不到页面',
+          icon: 'icon-page'
+        }
+      },
+      {
+        path: '*',
+        redirect: '/404'
+      }
+    ]
+}
+```

docs/guide/essentials/i18n.md

@@ -0,0 +1,100 @@
+# 多语言支持
+
+
+## 页签国际化
+
+`router-tab` 组件提供了 `i18n` 属性，用以配置自定义的国际化转换方法，从而实现路由页签的多语言展示。
+
+#### 支持国际化的字段：
+
+- `title`: 页签标题
+
+- `tips`: 页签提示
+  
+
+#### 定义国际化的方式：
+
+- `'i18n:custom.i18n.key'`: 字符串方式， `i18n:` 前缀 + 国际化字段的 `key`
+
+- `['custom.i18n.key', ...params]`: 数组方式，第一项为国际化字段的 `key`，后面为参数列表。适用于动态的国际化内容。
+  - 参考: [动态更新页签](../advanced/dynamic-tab-info.md#动态更新页签)
+
+
+<doc-links api="#i18n" demo="/i18n/"></doc-links>
+
+
+**配置自定义国际化方法**
+
+``` html
+<template>
+  <router-tab :i18n="i18n" />
+</template>
+
+<script>
+export default {
+  methods: {
+    // 自定义国际化转换方法
+    i18n (key, params) {
+      // $getI18n 为项目的公共国际化方法
+      return this.$getI18n(key, params)
+    }
+  }
+}
+</script>
+```
+
+
+**路由配置国际化页签**
+``` javascript {5,7,13}
+const routes = [{
+  path: '/page1',
+  component: pageComponent,
+  meta: {
+    title: 'i18n:routerTab.page1', // 通过配置 'i18n:key' 的方式来设置国际化字段 'routerTab.page1'
+    icon: 'icon-user', // 页签图标，可选
+    tips: 'i18n:routerTab.page1Tips', // 页签提示同样支持国际化
+  }
+}, {
+  path: '/page2',
+  component: pageComponent,
+  meta: {
+    title: ['routerTab.page2'], // 通过数组方式来设置国际化字段 'routerTab.page2'
+    icon: 'icon-user', // 页签图标，可选
+  }
+}]
+```
+
+
+
+## 组件语言
+
+通过配置 `router-tab` 组件的 `language` 属性，可以设置组件显示的语言 (主要表现为页签右键菜单)。
+
+
+`RouterTab` 默认语言是 `zh-CN`，另外内置了 `en`。
+
+<doc-links api="#language" demo="/lang-en/"></doc-links>
+
+**指定组件显示为英文**
+
+``` html
+<router-tab language="en"/>
+```
+
+**自定义的语言** ([参考配置](https://github.com/bhuh12/vue-router-tab/blob/dev/src/lang/en.js))
+
+``` html
+<router-tab :language="customLanguage"/>
+```
+
+``` javascript
+export default {
+  data () {
+    return {
+      customLanguage: {
+        ...
+      }
+    }
+  }
+}
+```

docs/guide/essentials/iframe.md

@@ -0,0 +1,29 @@
+
+# iframe 页签操作
+
+`RouterTab` 支持通过 iframe 页签嵌入外部网站。
+
+::: warning
+该功能需要引入 `RouterTab` 内置路由，请参考 [基础 - 路由配置](README.md#路由配置)
+:::
+
+<doc-links api="#routertab-openiframetab" demo="/default/"></doc-links>
+
+#### 打开 iframe 页签
+
+``` js
+// 三个参数分别为：链接、页签标题、图标
+this.$routerTab.openIframeTab('https://www.baidu.com', '百度', 'icon-web')
+```
+
+#### 关闭 iframe 页签
+
+``` js
+this.$routerTab.closeIframeTab('https://www.baidu.com')
+```
+
+#### 刷新 iframe 页签
+
+``` js
+this.$routerTab.refreshIframeTab('https://www.baidu.com')
+```

docs/guide/essentials/operate.md

@@ -0,0 +1,122 @@
+# 页签操作
+
+## 打开/切换页签
+
+`RouterTab` 通过响应路由变化来新增或切换页签，直接使用 `vue-router` 提供的方法即可。
+
+参考文档：[Vue Router 导航](https://router.vuejs.org/zh/guide/essentials/navigation.html)
+
+<doc-links demo="/default/"></doc-links>
+
+1. **`router-link` 组件方式**
+
+  打开和切换到页签
+  
+  ``` html
+  <router-link to="/page/1">页面1</router-link>
+  ```
+
+  全新打开页签 (**刷新已有页签**)
+
+  ``` html
+  <router-link to="/page/2" @click.native="$routerTab.refresh('/page/2')">页面2”<router-link>
+  ```
+
+2. **通过 `router.push`、`router.replace`、`router.go`**
+
+  注意：在 Vue 实例内部，您可以通过 $router 访问路由实例。因此您可以调用 this.$router.push。
+
+  ``` javascript
+  // 如果需要全新打开请加上：
+  // this.$routerTab.refresh('/page/1')
+  this.$router.push('/page/1')
+  ```
+
+## 关闭页签
+
+您可以通过 `RouterTab` 的实例方法 [`routerTab.close(location, fullMatch?)`](../../api/README.md#routertab-close) 来关闭页签
+
+::: tip
+1. 在 Vue 实例内部，您可以通过 `$routerTab` 访问路由页签实例。因此您可以调用 `this.$routerTab.close`。
+
+2. 当 `RouterTab` 组件只有一个页签，或者初始页签的 `closable` 配置为 `false`，页签关闭操作将不生效。
+:::
+
+<doc-links api="#routertab-close" demo="/default/"></doc-links>
+
+**关闭当前页签**
+
+``` js
+this.$routerTab.close()
+```
+
+**关闭指定页签**
+``` js
+// 关闭指定 fullPath 的页签
+this.$routerTab.close('/page/1')
+
+// 关闭指定 location 的页签
+this.$routerTab.close({
+  name: 'page',
+  params: {
+    id: 2
+  }
+})
+```
+
+**模糊关闭页签**
+``` js
+// 关闭与给定地址共用页签的地址，即使地址不完全匹配
+// 默认 `alive-id` 规则下，类似 '/page/1?query=2' 这样的页签也能被匹配关闭
+this.$routerTab.close('/page/1', false)
+```
+
+
+## 刷新页签
+
+您可以通过 `RouterTab` 的实例方法 [`routerTab.refresh(location, fullMatch?)`](../../api/README.md#routertab-refresh) 来刷新页签
+
+<doc-links api="#routertab-refresh" demo="/default/"></doc-links>
+
+**刷新当前页签**
+
+``` js
+this.$routerTab.refresh()
+```
+
+**刷新指定页签**
+``` js
+// 刷新指定 fullPath 的页签
+this.$routerTab.refresh('/page/1')
+
+// 刷新指定 location 的页签
+this.$routerTab.refresh({
+  name: 'page',
+  params: {
+    id: 2
+  }
+})
+```
+
+**模糊刷新页签**
+``` js
+// 刷新与给定地址共用页签的地址，即使地址不完全匹配
+// 默认 `alive-id` 规则下，类似 '/page/1?query=2' 这样的页签也能被匹配刷新
+this.$routerTab.close('/page/1', false)
+```
+
+## 刷新所有页签
+
+您可以通过 `RouterTab` 的实例方法 [`routerTab.refreshAll(force?)`](../../api/README.md#routertab-refreshall) 来刷新所有页签
+
+**刷新所有页签**
+
+``` js
+this.$routerTab.refreshAll()
+```
+
+**强制刷新所有页签**，忽略页面组件的 `beforePageLeave` 配置
+
+``` js
+this.$routerTab.refreshAll(true)
+```

docs/guide/essentials/rule.md

@@ -0,0 +1,65 @@
+# 页签规则
+
+不同的页签维护着各自的页面缓存，而**页签规则**定义了不同的路由**打开页签的方式**。
+
+
+## 内置规则
+
+- `path` (默认规则)
+  - 规则：`route => route.path` 
+  - 说明：相同route.params的路由共用页签
+  - <demo-link href="/default/rule/a/1"/>
+
+- `fullPath`
+  - 规则：`route => route.fullPath.replace(route.hash, '')` 
+  - 说明：相同route.params和route.query的路由共用页签
+  - <demo-link href="/global-rule/rule/a/1"/>
+
+
+## 全局页签规则
+
+通过配置 `router-tab` 组件的 `alive-id` 属性，您可以定义全局的页签规则
+
+<doc-links api="#alive-id" demo="/global-rule/rule/a/1"></doc-links>
+
+**示例：**
+
+``` html
+<router-tab :alive-id="route => route.fullPath.replace(route.hash, '')"/>
+```
+
+例子中，配置 `alive-id` 为 `fullPath` 去除 `hash` 部分。
+
+根据该规则，`page/1` 和 `page/1?query=2`、`page/2`、`page/2?query=2` 这四个地址都是打开**不同**的页签。而 `page/1` 和 `page/1#hash1` 是同一个页签，因为它们忽略 `hash` 后的路径一致。
+
+该规则已经内置在 `RouterTab` 中了，因此，您也可以直接这样使用：
+
+``` html
+<router-tab alive-id="fullPath"/>
+```
+
+
+## 路由页签规则
+
+通过配置**路由**的 `meta.aliveId` 属性，您可以针对特定路由定制页签规则
+
+<doc-links api="#meta-aliveid" demo="/default/route-rule/a/1"></doc-links>
+
+**示例：**
+
+``` javascript {8,9,10}
+const route = {
+  path: '/my-page/:catalog/:type',
+  component: {
+    template: '<div>定制规则：{{$route.params.catalog}}/{{$route.params.type}}</div>'
+  },
+  meta: {
+    title: '定制规则',
+    aliveId (route) {
+      return `/my-page/${route.params.catalog}`
+    }
+  }
+}
+```
+
+根据示例中的页签规则，`/my-page/a/1` 和 `/my-page/a/2` 打开的是**同一个**页签。而 `/my-page/b/1` 和 `/my-page/b/2` 则打开另外一个页签

docs/guide/installation.md

@@ -0,0 +1,54 @@
+# 安装
+
+### NPM
+
+``` bash
+npm install vue-router-tab
+```
+
+**yarn** (推荐)
+
+``` bash
+yarn add vue-router-tab
+```
+
+### 构建开发版
+
+如果你想使用最新的开发版，就得从 GitHub 上直接 clone，然后自己 build 一个 `vue-router-tab`。
+
+``` bash
+git clone https://github.com/bhuh12/vue-router-tab.git node_modules/vue-router-tab
+cd node_modules/vue-router-tab
+yarn
+yarn lib:build
+```
+
+<!-- 
+### 直接下载 / CDN
+
+[https://unpkg.com/vue-router-tab/dist/lib/vue-router-tab.umd.min.js](https://unpkg.com/vue-router-tab/dist/lib/vue-router-tab.umd.min.js)
+
+[https://unpkg.com/vue-router-tab/dist/lib/vue-router-tab.css](https://unpkg.com/vue-router-tab/dist/lib/vue-router-tab.css)
+
+[Unpkg.com](https://unpkg.com) 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像  `https://unpkg.com/vue-router-tab@0.1.8/dist/lib/vue-router-tab.umd.min.js` 这样指定 版本号 或者 Tag。
+
+在 Vue 后面加载 `vue-router-tab`，它会自动安装的：
+
+``` html
+<style src="/path/to/vue-router-tab.css"></style>
+
+<script src="/path/to/vue.js"></script>
+<script src="/path/to/vue-router.js"></script>
+<script src="/path/to/vue-router-tab.js"></script>
+```
+-->
+
+ 
+
+### Polyfill
+
+Vue Router Tab 使用 [**Vue CLI 3**](https://cli.vuejs.org) 来构建库，没有内置 Polyfills。
+
+如果您的项目有兼容旧版本浏览器的需求，可以参考以下链接，自行 Polyfill: 
+
+[https://cli.vuejs.org/zh/guide/browser-compatibility.html](https://cli.vuejs.org/zh/guide/browser-compatibility.html)