添加 “页签操作” 教程

README.md

@@ -45,7 +45,7 @@ Vue Router Tab 是基于 `Vue Router` 的路由页签组件。
 - [x] [初始页签数据](docs/api.md#tabs)，进入页面时默认显示的页签
 - [x] 内置页签和页面[过渡效果](docs/api.md#tab-transition)，支持自定义配置
 - [x] 自定义[页签项模板](docs/api.md#自定义页签项模板)
-- [x] [动态页签信息](docs/guide.md#动态页签信息) (标题/图标/提示)
+- [x] [动态更新页签](docs/guide.md#动态更新页签) (标题/图标/提示)
 - [x] [页签离开 (页签关闭/刷新/替换) 前确认](docs/guide.md#页签离开前确认)
 - [x] [语言配置](docs/api.md#i18n)：zh-CN (默认) / en，自定义语言
 

docs/api.md

@@ -189,27 +189,6 @@
 
   关闭指定 `location` 的页签
 
-- **示例**：
-
-  ``` js
-  // 如果未提供 `location`，则默认关闭当前激活的页签
-  vm.$routerTab.close()
-
-  // 关闭指定 fullPath 的页签
-  vm.$routerTab.close('/page/1')
-
-  // 关闭指定 location 的页签
-  vm.$routerTab.close({
-    name: 'page',
-    params: {
-      id: 2
-    }
-  })
-  
-  // 关闭与给定地址相同 aliveKey 的页签，即使地址不完全匹配
-  vm.$routerTab.close('/page/1', false)
-  ```
-
   
 ### routerTab.refresh
 
@@ -221,26 +200,6 @@
 
   刷新指定 `location` 的页签
 
-- **示例**：
-
-  ``` js
-  // 如果未提供 `location`，则默认刷新当前激活的页签
-  vm.$routerTab.refresh()
-
-  // 刷新指定 fullPath 的页签
-  vm.$routerTab.refresh('/page/1')
-
-  // 刷新指定 location 的页签
-  vm.$routerTab.refresh({
-    name: 'page',
-    params: {
-      id: 2
-    }
-  })
-  
-  // 刷新与给定地址相同 aliveKey 的页签，即使地址不完全匹配
-  vm.$routerTab.refresh('/page/1', false)
-  ```
 
 ### routerTab.refreshAll
 
@@ -251,15 +210,7 @@
 
   刷新所有页签
 
-- **示例**：
-
-  ``` js
-  // 刷新所有页签
-  vm.$routerTab.refreshAll()
 
-  // 强制刷新所有页签
-  vm.$routerTab.refreshAll(true)
-  ```
 
 ## Route.meta 路由元信息
 

docs/guide.md

@@ -50,7 +50,7 @@ new Vue({
 配置参考: [RouterTab Props](api.md#routertab-props)
 
 ::: danger
-`<router-tab>` 仅支持单例模式，请勿在同一个页面中引入多个 `<router-tab>` 组件！
+`vue-router-tab` 仅支持单例模式，请勿在同一个页面中引入多个 `<router-tab>` 组件！
 :::
 
 **示例：**
@@ -121,10 +121,131 @@ export default new Router({
 }
 ```
 
+## 页签操作
+
+### 打开/切换页签
+
+`vue-router-tab` 通过响应路由变化来新增或切换页签，直接使用 `vue-router` 提供的方法即可。
+
+参考文档：[Vue Router 导航](https://router.vuejs.org/zh/guide/essentials/navigation.html)
+
+<doc-links demo="/default/page/1"></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')
+  ```
+
+### 关闭页签
+
+您可以通过 `router-tab` 的实例方法 [`routerTab.close(location, fullMatch?)`](api.md#routertab-close) 来关闭页签
+
+::: tip
+在 Vue 实例内部，你可以通过 `$routerTab` 访问路由页签实例。因此你可以调用 `this.$routerTab.close`。
+:::
+
+<doc-links api="#routertab-close" demo="/default/page/1"></doc-links>
+
+**关闭当前页签**
+
+``` js
+this.$routerTab.close()
+```
+
+**关闭指定页签**
+``` js
+// 关闭指定 fullPath 的页签
+this.$routerTab.close('/page/1')
+
+// 关闭指定 location 的页签
+this.$routerTab.close({
+  name: 'page',
+  params: {
+    id: 2
+  }
+})
+```
+
+**模糊关闭页签**
+``` js
+// 关闭与给定地址共用页签的地址，即使地址不完全匹配
+// 默认 `alive-key` 规则下，类似 '/page/1?query=2' 这样的页签也能被匹配关闭
+this.$routerTab.close('/page/1', false)
+```
+
+
+### 刷新页签
+
+您可以通过 `router-tab` 的实例方法 [`routerTab.refresh(location, fullMatch?)`](api.md#routertab-refresh) 来刷新页签
+
+<doc-links api="#routertab-refresh" demo="/default/page/1"></doc-links>
+
+**刷新当前页签**
+
+``` js
+this.$routerTab.refresh()
+```
+
+**刷新指定页签**
+``` js
+// 刷新指定 fullPath 的页签
+this.$routerTab.refresh('/page/1')
+
+// 刷新指定 location 的页签
+this.$routerTab.refresh({
+  name: 'page',
+  params: {
+    id: 2
+  }
+})
+```
+
+**模糊刷新页签**
+``` js
+// 刷新与给定地址共用页签的地址，即使地址不完全匹配
+// 默认 `alive-key` 规则下，类似 '/page/1?query=2' 这样的页签也能被匹配刷新
+this.$routerTab.close('/page/1', false)
+```
+
+### 刷新所有页签
+
+您可以通过 `router-tab` 的实例方法 [`routerTab.refreshAll(force?)`](api.md#routertab-refreshall) 来刷新所有页签
+
+**刷新所有页签**
+
+``` js
+vm.$routerTab.refreshAll()
+```
+
+**强制刷新所有页签**，忽略页面组件的 `beforePageLeave` 配置
+
+``` js
+vm.$routerTab.refreshAll(true)
+```
+
 
 ## 进阶
 
-**基础** 中的配置已经能满足大部分使用场景了，您还可以根据下面的内容实现更多功能。
+前面的内容已经能满足大部分使用场景了，您还可以根据下面的内容实现更多功能。
 
 ### 初始展示页签
 
@@ -151,9 +272,9 @@ export default new Router({
   ```
 
 
-### 动态页签信息
+### 动态更新页签
 
-`RouterTab` 会监听组件 `vm.routeTab` 来动态更新页签信息。您可以通过设置 `vm.routeTab` 来更改页签的标题、图标、提示。
+`RouterTab` 会监听组件 `this.routeTab` 来动态更新页签信息。您可以通过设置 `this.routeTab` 来更改页签的标题、图标、提示。
 
 <doc-links demo="/default/tab-dynamic"></doc-links>
 

src/App.vue

@@ -48,7 +48,7 @@ export default {
       }, {
         title: '页面配置',
         data: [
-          { text: '动态页签配置', to: '/default/tab-dynamic' },
+          { text: '动态更新页签配置', to: '/default/tab-dynamic' },
           { text: '页面离开提示', to: '/default/page-leave' }
         ]
       }]

src/router.js

@@ -19,7 +19,7 @@ let pageRoutes = [{
   path: 'tab-dynamic',
   component: importPage('TabDynamic'),
   meta: {
-    title: '动态页签',
+    title: '动态更新页签',
     icon: 'rt-icon-log'
   }
 }, {

src/views/Page.vue

@@ -22,9 +22,9 @@
         @click.native="$routerTab.refresh('/default/page/'+ prevId)">刷新并打开“页面{{prevId}}”
       </router-link>
 
-      <router-link class="btn" to="/default/tab-dynamic">打开“动态页签”</router-link>
+      <router-link class="btn" to="/default/tab-dynamic">打开“动态更新页签”</router-link>
 
-      <a class="btn" @click="$routerTab.close('/default/tab-dynamic')">关闭“动态页签”</a>
+      <a class="btn" @click="$routerTab.close('/default/tab-dynamic')">关闭“动态更新页签”</a>
 
       <a class="btn" @click="$routerTab.refresh()">刷新当前页面</a>
 

src/views/TabDynamic.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-page">
-    <h2>动态页签</h2>
+    <h2>动态更新页签</h2>
 
     <div class="form-item">
       <label>
@@ -36,7 +36,7 @@ export default {
   data () {
     return {
       routeTab: {
-        title: '动态页签',
+        title: '动态更新页签',
         icon: 'rt-icon-log',
         tips: ''
       },