docs(i18n): 添加路由页签国际化文档

demo/App.vue

@@ -108,6 +108,13 @@ $just-trans: all .2s ease-in-out;
 
   /deep/ .router-tab {
     height: 100%;
+
+    // 路由页面
+    &-page {
+      padding: 15px;
+      font-size: 14px;
+      line-height: 1.5;
+    }
   }
 }
 </style>

demo/assets/scss/demo.scss

@@ -58,13 +58,6 @@ a:link {
   transition: color .3s ease-in-out;
 }
 
-// 路由页面
-.app-page {
-  padding: 15px;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
 // 强提示
 .text-strong {
   font-weight: 600;

demo/components/AppAside.vue

@@ -29,10 +29,11 @@ export default {
           { text: '过渡效果', to: '/transition/' },
           { text: '初始展示页签', to: '/initial-tabs/' },
           {
-            text: '语言配置',
+            text: 'i18n',
             children: [
-              { text: '指定语言', to: '/lang-en/' },
-              { text: '自定义语言', to: '/lang-custom' }
+              { text: '页签国际化', to: '/i18n/' },
+              { text: '组件语言', to: '/lang-en/' },
+              { text: '组件自定义语言', to: '/lang-custom' }
             ]
           },
           { text: '自定义页签模板', to: '/slot/' }

demo/components/layout/I18n.vue

@@ -0,0 +1,67 @@
+<template>
+  <main class="app-main">
+    <router-tab
+      :i18n="i18n"
+      :tabs="tabs"
+    />
+  </main>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  name: 'LangCustom',
+  data () {
+    return {
+      currentLang: 'en',
+
+      langs: {
+        en: {
+          i18n: 'I18n Page',
+          page: 'Page {0}'
+        },
+
+        'zh-CN': {
+          i18n: '国际化页面',
+          page: '页面 {0}'
+        }
+      },
+
+      tabs: [
+        '/i18n/lang',
+        { to: '/i18n/page/1', title: ['page', 1] },
+        { to: '/i18n/page/2', title: ['page', 2] }
+      ]
+    }
+  },
+
+  computed: {
+    lang () {
+      return this.langs[this.currentLang] || this.langs.en
+    }
+  },
+
+  beforeCreate () {
+    // 全局语言方法
+    Vue.prototype.$lang = {
+      set: lang => {
+        this.currentLang = lang
+      },
+
+      get: () => this.currentLang,
+
+      list: () => Object.keys(this.langs)
+    }
+  },
+
+  methods: {
+    i18n (key, params) {
+      let lang = this.lang[key]
+      return lang
+        ? lang.replace(/(\{(\d+)\})/g, (match, $0, $1) => params[$1] || '') // 替换国际化中的列表参数
+        : key
+    }
+  }
+}
+</script>

demo/router.js

@@ -68,6 +68,25 @@ export default new Router({
     component: importLayout('InitialTabs'),
     redirect: '/initial-tabs/page/1',
     children: pageRoutes
+  }, {
+    path: '/i18n/',
+    component: importLayout('I18n'),
+    redirect: '/i18n/lang',
+    children: [{
+      path: 'lang',
+      component: importPage('I18n'),
+      meta: {
+        title: 'i18n:i18n',
+        icon: 'rt-icon-doc'
+      }
+    }, {
+      path: 'page/:id',
+      component: importPage('Page'),
+      meta: {
+        title: 'i18n:page',
+        icon: 'rt-icon-doc'
+      }
+    }, ...RouterTabRoutes]
   }, {
     path: '/lang-en/',
     component: importLayout('LangEn'),

demo/views/404.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-main">
-    <div class="app-page">
+    <div>
       <h2>页面找不到了！！！</h2>
     </div>
   </div>

demo/views/I18n.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h2>国际化路由页签</h2>
+
+    <section>
+      切换语言：
+      <a
+        v-for="lang in $lang.list()"
+        :key="lang"
+        :class="{primary: lang === $lang.get()}"
+        class="demo-btn"
+        @click="$lang.set(lang)"
+      >{{ lang }}</a>
+    </section>
+  </div>
+</template>

demo/views/Page.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-page">
+  <div>
     <h2 @click="click">
       页面{{ pageId }}
     </h2>
@@ -120,12 +120,15 @@ export default {
   mixins: [ pageTimer ],
   data () {
     let id = this.$route.params.id
+    let isI18nPage = this.$route.fullPath.indexOf('/i18n/') > -1
     return {
       pageId: id,
       nextId: +id + 1,
       prevId: +id - 1,
       routeTab: {
-        title: '页面' + id
+        title: isI18nPage
+          ? ['page', id]
+          : '页面' + id
       },
 
       iframe: {

demo/views/PageLeave.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-page">
+  <div>
     <h2>页面离开确认</h2>
 
     <p>你在 <strong class="text-strong">{{ pageTime }}</strong> 秒前打开本页面</p>

demo/views/Rule.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-page">
+  <div>
     <h2>{{ curRule.label }}页签规则</h2>
 
     <p>你在 <strong class="text-strong">{{ pageTime }}</strong> 秒前打开本页面</p>

demo/views/TabDynamic.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-page">
+  <div>
     <h2>动态更新页签</h2>
 
     <div class="form-item">

docs/api.md

@@ -17,9 +17,24 @@
   根据 `route.path` 来缓存页面组件。
 
 
+### i18n
+
+页签国际化转换
+
+- 类型: `Function`
+
+- 参数: 
+  
+  - `{String} [key]`: 国际化字段 `key`
+
+  - `{Array} [params]` 国际化字段参数列表
+
+- 返回: `Strong` 国际化转换后的字符串
+
+
 ### language
 
-语言配置
+组件语言
 
 - 类型: `String | Object`
 
@@ -48,6 +63,7 @@
 
 - 默认值: `[]`
 
+
 ### router-view
 
 **Vue Router Tab 内置 `<router-view>` 组件的配置**
@@ -59,7 +75,6 @@
 - 默认值: `{}`
 
 
-
 ### tab-transition
 
 **页签过渡效果**，新增和关闭页签时的过渡
@@ -102,55 +117,55 @@
 
 ### routerTab.close
 
+- **说明**：关闭指定 `location` 的页签
+
 - **参数**：
   - `{String | Object} [location]` 路由地址 - [参考文档](https://router.vuejs.org/zh/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)
   - `{Boolean} [fullMatch = true]` 是否全匹配（匹配fullPath去除hash部分）
 
-- **说明**：关闭指定 `location` 的页签
-
   
 ### routerTab.refresh
 
+- **说明**：刷新指定 `location` 的页签
+
 - **参数**：
   - `{String | Object} [location]` 路由地址 - [参考文档](https://router.vuejs.org/zh/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)
   - `{Boolean} [fullMatch = true]` 是否全匹配（匹配fullPath去除hash部分）
 
-- **说明**：刷新指定 `location` 的页签
-
 
 ### routerTab.refreshAll
 
+- **说明**：刷新所有页签
+
 - **参数**：
   - `{Boolean} [force = false]` 如果 `force` 为 `true`，则忽略页面组件的 `beforePageLeave` 配置，强制刷新所有页签
 
-- **说明**：刷新所有页签
-
 
 ### routerTab.openIframeTab
 
+- **说明**：打开 iframe 页签
+
 - **参数**：
   - `{String} [src]` 要打开的 iframe 页签链接
   - `{String} [title]` 页签标题
   - `{String} [icon]` 页签图标
 
-- **说明**：打开 iframe 页签
-
 
 ### routerTab.closeIframeTab
 
+- **说明**：关闭 iframe 页签
+
 - **参数**：
   - `{String} [src]` 要关闭的 iframe 页签链接
 
-- **说明**：关闭 iframe 页签
-
 
 ### routerTab.refreshIframeTab
 
+- **说明**：刷新 iframe 页签
+
 - **参数**：
   - `{String} [src]` 要刷新的 iframe 页签链接
 
-- **说明**：刷新 iframe 页签
-
 
 
 ## Route.meta 路由元信息
@@ -193,6 +208,8 @@
 
 
 ### beforePageLeave
+
+  - **说明**: 页面离开确认。页面组件选项，与 `data`, `methods` 并列
  
   - **参数**: 
     - `{Function} resolve` 执行后允许离开页签
@@ -200,8 +217,6 @@
     - `{Object} tab` 页签信息
     - `{String} type` 离开类型：`close`: '关闭', `refresh`: '刷新', `replace`: '替换'
 
-  - **说明**: 页面离开确认。页面组件选项，与 `data`, `methods` 并列
-
 
 ### vm.$routerTab
 

docs/guide.md

@@ -283,6 +283,93 @@ 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: {
+        ...
+      }
+    }
+  }
+}
+```
+
+
 ## 页签规则
 
 不同的页签维护着各自的页面缓存，而**页签规则**定义了不同的路由**打开页签的方式**。
@@ -505,9 +592,16 @@ const route = {
 
 **示例：**
 
-``` javascript {8,11,12,13,14,15}
+``` javascript {7,15,18,27}
 export default {
-  name: 'page',
+  name: 'goods',
+  data () {
+    return {
+      goodsName: '商品名',
+      goodsDesc: '商品简介',
+      routeTab: null // routeTab 存放在 data 中以支持响应
+    }
+  },
   mounted () {
     setTimeout(() => {
       let { id } = this.$route.params
@@ -517,45 +611,18 @@ export default {
 
       // 更新多个页签信息
       this.routeTab = {
-        title: `页面${id}动态标题`,
-        icon: 'el-icon-document',
-        tips: `页面${id}动态提示`
+        title: `商品-${this.goodsName}`,
+        icon: 'el-icon-goods',
+        tips: this.goodsDesc
       }
-    }, 300)
-  }
-}
-```
 
-
-### 语言配置
-
-通过配置 `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: {
-        ...
+      // 国际化页签标题
+      this.routeTab = {
+        // 以数组方式定义带参数列表的国际化，格式：['i18nKey', ...params]
+        title: ['routerTab.goods', this.goodsName]
       }
-    }
+      
+    }, 300)
   }
 }
 ```