[add] 进阶国际化

docs/advance/i18n.md

@@ -3,5 +3,204 @@ title: 国际化
 lang: zn-CN
 ---
 # 国际化
+vue-antd-admin 采用 [vue-i18n](https://kazupon.github.io/vue-i18n/) 插件来实现国际化，该项目已经内置并且加载好了基础配置。可以直接上手使用。
 
-### 作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页
+> 如果你还没有看快速入门，请先移步查看: [页面 -> i18n国际化配置](../develop/page.html#i18n国际化配置)
+
+## 
+
+## 菜单国际化（配置路由国际化）
+如果你有一个路由是这样的 `@/router/config.js`
+
+```js
+...
+{
+    path: '/',
+    name: '首页',
+    component: TabsView,
+    redirect: '/login',
+    children: [
+    {
+        path: 'dashboard',
+        name: 'Dashboard',
+        meta: {
+            icon: 'dashboard'
+        },
+        component: BlankView,
+        children: [
+        {
+            path: 'workplace',
+            name: '工作台',
+            meta: {
+            page: {
+                closable: false
+            }
+            },
+            component: () => import('@/pages/dashboard/workplace'),
+        },
+        {
+            path: 'analysis',
+            name: '分析页',
+            component: () => import('@/pages/dashboard/analysis'),
+        }
+        ]
+    },
+}
+...
+```
+那么你的 `@/router/i18n.js` 就应该是
+```js
+module.exports = {
+  messages: {
+    CN: {
+      dashboard: {
+        name: 'Dashboard',
+        workplace: {name: '工作台'},
+        analysis: {name: '分析页'}
+    },
+    US: {
+      dashboard: {
+        name: 'Dashboard',
+        workplace: {name: 'Workplace'},
+        analysis: {name: 'Analysis'}
+    },
+    HK: {
+      dashboard: {
+        name: 'Dashboard',
+        workplace: {name: '工作台'},
+        analysis: {name: '分析頁'}
+    },
+    // 其他国家 JP ...
+  }
+}
+```
+
+以 `CN(中文)` 这个 `key` 为例，访问 `工作台(URL/dashboard/analysis)` 就相当于访问 `I18n.js` 文件的 `dashboard.analysis.name` 就能定位到菜单的所使用的语言。
+
+```JS
+// 如:你的访问的路由是 `URL/abc/edf/xxx` 
+// @/router/config.js
+{
+    path: 'abc',
+    name: '一级',
+    children: [
+        {
+            path: 'edf',
+            name: '二级',
+            children: [
+            {
+                path: 'xxx',
+                name: '三级',
+            }   
+        }
+    ]
+}
+// @/router/i18n.js
+{
+    CN: {
+      abc: {
+        name： '一级',
+        edf: {
+            name： '二级',
+            xxx: {
+                name: '三级'        
+            }
+        },
+    },
+    US: {
+      abc: {
+        name： 'one',
+        edf: {
+            name： 'two',
+            xxx: {
+                name: 'three'        
+            }
+        },
+    },
+    // 其他语言
+}
+```
+
+### 小技巧（公有语言包）
+项目里面肯定有很多通用或者复用性很高的语言，比如 `添加`、`删除`、等共用的语言也可以写到 `@/router/i18n.js` 
+
+```JS
+// @/router/i18n.js
+CN: {
+    'add': '添加',
+},
+US: {
+    'add': 'Add',
+},
+// 其他语言
+```
+那么在页面里面就可以直接使用该语言，就无需在 `page/你的页面/i18n.js` 重复添加。
+```vue
+<template>
+  <div>{{ $t('add') }}</div>
+</template>
+<script>
+...
+export default {
+  ...
+  data() {
+    return {
+        xxx: this.$t('add')
+    }
+  },
+}
+</script>
+```
+
+## 新增一门语言
+
+首先在 `@/layouts/header/AdminHeader.vue` ，新增一门语言 (多个同理)。
+
+```vue {15}
+<template>
+  ...
+</template>
+<script>
+...
+export default {
+  ...
+  data() {
+    return {
+      langList: [
+        {key: 'CN', name: '简体中文', alias: '简体'},
+        {key: 'HK', name: '繁體中文', alias: '繁體'},
+        {key: 'US', name: 'English', alias: 'English'},
+        // 新增一个语言选项, key是i18n的索引，name是菜单显示名称
+        {key: 'JP', name: 'Japanese', alias: 'Japanese'}
+      ],
+      searchActive: false
+    }
+  },
+}
+</script>
+```
+
+> TIP: 后续开发建议把这里改成动态配置的方式！
+
+然后开始往 `@/router/i18n.js` 和 `@/pages/你的页面/i18n.js` 里面分别添加上语言的翻译。
+
+```vue {12,13,14}
+module.exports = {
+    messages: {
+        CN: {
+            home: {name: '首页'},
+        },
+        US: {
+            home: {name: 'home'},
+        },
+        HK: {
+            home: {name: '首頁'},
+        },
+        JP: {
+            home: {name: '最初のページ'},
+        },
+    }
+}
+```
+
+> Notice: 更多用法请移步到 [vue-i18n](https://kazupon.github.io/vue-i18n/) 。