页面组件routerTab字段更改为routeTab，并添加_isRouterPage

docs/api.md

@@ -1,12 +1,8 @@
 # API 参考
 
-::: tip
-在 Vue 实例内部，你可以通过 `$routerTab` 访问路由页签实例。因此你可以调用 `vm.$routerTab.close()`。
-:::
-
 ## RouterTab Props
 
-### `alive-key`
+### alive-key
 
 页面组件缓存的键
 
@@ -36,7 +32,7 @@
   <router-tab :alive-key="route => route.fullPath + '1'"></router-tab>
   ```
 
-### `i18n`
+### i18n
 
 语言配置
 
@@ -87,13 +83,13 @@
     }
     ```
 
-### `tabs`
+### tabs
 
 **初始页签数据**，进入页面时默认显示的页签。相同 `aliveKey` 的页签只保留第一个
 
 - 类型: `Array <string | Object>`
   
-  - tabs子元素类型为 `string` 时，应配置为要打开页面的 `fullPath` ，页签的标题/图片/提示等信息会从对应页面的 `router` 配置中获取
+  - tabs子元素类型为 `string` 时，应配置为要打开页面的 `fullPath` ，页签的标题、图标、提示等信息会从对应页面的 `router` 配置中获取
 
   - tabs子元素类型为 `Object` 时：
     
@@ -105,7 +101,7 @@
 
 - 默认值: `[]`
 
-### `router-view`
+### router-view
 
 **Vue Router Tab 内置 `<router-view>` 组件的配置**
 
@@ -117,7 +113,7 @@
 
 
 
-### `tab-transition`
+### tab-transition
 
 **页签过渡效果**，新增和关闭页签时的过渡
 
@@ -140,7 +136,7 @@
   ```
 
 
-### `page-transition`
+### page-transition
 
 **页面过渡效果**
 
@@ -172,15 +168,18 @@
 
 ## RouterTab 实例属性
 
-### `routerTab.activedTab`
+### routerTab.activedTab
 
 当前激活的页签id
 
 
 ## RouterTab 实例方法
 
+::: tip
+在 Vue 实例内部，你可以通过 `this.$routerTab` 来访问路由页签实例。例如：调用 `this.$routerTab.close()` 来关闭当前页签。
+:::
 
-### `routerTab.close`
+### routerTab.close
 
 - **参数**：
   - `{string | Object} [location]` 路由地址 - [参考文档](https://router.vuejs.org/zh/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)
@@ -212,7 +211,7 @@
   ```
 
   
-### `routerTab.refresh`
+### routerTab.refresh
 
 - **参数**：
   - `{string | Object} [location]` 路由地址 - [参考文档](https://router.vuejs.org/zh/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)
@@ -243,7 +242,7 @@
   vm.$routerTab.refresh('/page/1', false)
   ```
 
-### `routerTab.refreshAll`
+### routerTab.refreshAll
 
 - **参数**：
   - `{Boolean} [force = false]` 如果 `force` 为 `true`，则忽略页面组件的 `beforePageLeave` 配置，强制刷新所有页签
@@ -256,15 +255,17 @@
 
   ``` js
   // 刷新所有页签
-  vm.routerTab.refreshAll()
+  vm.$routerTab.refreshAll()
 
   // 强制刷新所有页签
-  vm.routerTab.refreshAll(true)
+  vm.$routerTab.refreshAll(true)
   ```
 
-## Route.meta 路由元
+## Route.meta 路由元信息
 
-### `meta.title`
+通过路由的 `meta`，我们可以配置路由页签的标题、图标、提示和缓存规则
+
+### meta.title
 
 - 类型: `string`
 - 默认值: `'新页签'`
@@ -272,15 +273,14 @@
 页签标题
 
 
-
-### `meta.icon`
+### meta.icon
 
 - 类型: `string`
 
 页签图标
 
 
-### `meta.tips`
+### meta.tips
 
 - 类型: `string`
 - 默认值: 默认和页签标题 `meta.title` 保持一致
@@ -288,8 +288,30 @@
 页签提示
 
 
-### `meta.aliveKey`
+### meta.aliveKey
 
 页面组件缓存的键，用以设置路由独立的页签缓存规则。
 
-配置参考: [RouterTab Props > alive-key](#alive-key)
+配置参考: [RouterTab Props > alive-key](#alive-key)
+
+
+## RouterPage 路由页面
+
+通过 `<router-tab>` 加载的页面组件实例
+
+### vm.$routerTab
+
+为了方便调用，`<router-tab>` 将实例挂载在 `Vue.prototype` 上。因此，在所有 Vue 组件内部，你都可以通过 `this.$routerTab` 来访问路由页签实例
+
+
+### vm.routeTab
+
+**路由页签配置**。`<router-tab>` 通过监听页面组件的 `this.routeTab` 来更新页面对应页签的标题、图标、提示
+
+### vm._isRouterPage
+
+**是否是路由页面**：在通过 `<router-tab>` 加载的页面组件内部，访问 `this._isRouterPage` 会返回 `true`
+
+::: tip
+应用：在需要给路由页面添加全局混入 `mixin` 时，可在生命周期钩子（ `created` 之后）里判断 `this._isRouterPage`
+:::

docs/guide.md

@@ -149,7 +149,7 @@ export default new Router({
 
 ### 动态页签信息
 
-`RouterTab` 会监听组件 `vm.routerTab` 来动态更新页签信息。您可以通过设置 `vm.routerTab` 来更改页签的**标题**、**图标**和**提示**。
+`RouterTab` 会监听组件 `vm.routeTab` 来动态更新页签信息。您可以通过设置 `vm.routeTab` 来更改页签的标题、图标、提示。
 
 <doc-links demo="/default/tab-dynamic"></doc-links>
 
@@ -165,10 +165,10 @@ export default {
       let { id } = this.$route.params
 
       // 只更新页签标题
-      this.routerTab = `页面${id}动态标题`
+      this.routeTab = `页面${id}动态标题`
 
-      // 更新其他页签信息
-      this.routerTab = {
+      // 更新多个页签信息
+      this.routeTab = {
         title: `页面${id}动态标题`,
         icon: 'el-icon-document',
         tips: `页面${id}动态提示`

src/lib/RouterTab/mixins/RouterPage.js

@@ -7,6 +7,9 @@ export default {
 
     if (!$alive) return false
 
+    // 标记为路由页面
+    this._isRouterPage = true
+
     const key = $alive.getAliveKey($route)
 
     // 更新缓存数据
@@ -16,7 +19,7 @@ export default {
     })
 
     // 监听routerTab字段，更新页签信息
-    this.$watch('routerTab', function (val, old) {
+    this.$watch('routeTab', function (val, old) {
       cacheItem.tab = typeof val === 'string' ? { title: val } : val
       $alive.set(key, cacheItem)
     }, {
@@ -27,9 +30,9 @@ export default {
 
   // 解决webpack热加载后组件缓存不更新
   activated () {
-    const { $routerTab, $vnode } = this
+    const { $routerTab, $vnode, _isRouterPage } = this
 
-    if (!($vnode && $vnode.data.routerAlive)) return false
+    if (!_isRouterPage) return false
 
     let ctorId = $vnode.componentOptions.Ctor.cid
 

src/views/TabDynamic.vue

@@ -5,14 +5,14 @@
     <div class="form-item">
       <label>
         <p>修改页签标题</p>
-        <input type="text" v-model="routerTab.title">
+        <input type="text" v-model="routeTab.title">
       </label>
     </div>
 
     <div class="form-item">
       <label>
         <p>修改页签提示</p>
-        <input type="text" v-model="routerTab.tips">
+        <input type="text" v-model="routeTab.tips">
       </label>
     </div>
 
@@ -22,9 +22,9 @@
         class="tab-icon"
         v-for="icon in icons"
         :key="icon"
-        :class="`${icon === routerTab.icon ? 'actived' : ''} ${icon}`"
+        :class="`${icon === routeTab.icon ? 'actived' : ''} ${icon}`"
         title="设置页签图标"
-        @click="routerTab.icon = icon"
+        @click="routeTab.icon = icon"
       ></a>
     </div>
 
@@ -35,7 +35,7 @@
 export default {
   data () {
     return {
-      routerTab: {
+      routeTab: {
         title: '动态页签',
         icon: 'rt-icon-log',
         tips: ''