From 33179d96b7da1310d6975214273698a97bd1cb27 Mon Sep 17 00:00:00 2001
From: chenghongxing <1126263215@qq.com>
Date: Sun, 6 Dec 2020 11:14:16 +0800
Subject: [PATCH] update docs;

---
 docs/advance/i18n.md | 186 +++++++++++++------------------------------
 1 file changed, 55 insertions(+), 131 deletions(-)

diff --git a/docs/advance/i18n.md b/docs/advance/i18n.md
index 3beda70..024e667 100644
--- a/docs/advance/i18n.md
+++ b/docs/advance/i18n.md
@@ -8,150 +8,74 @@ vue-antd-admin 采用 [vue-i18n](https://kazupon.github.io/vue-i18n/) 插件来
 > 如果你还没有看快速入门，请先移步查看: [页面 -> i18n国际化配置](../develop/page.html#i18n国际化配置)
 
 
-## 菜单国际化（配置路由国际化）
-如果你有一个路由是这样的 `@/router/config.js`
+## 菜单和路由
 
+### 默认情况
+如果你没有对菜单进行国际化配置，admin 默认会从路由数据中提取数据作为国际化配置。route.name 作为中文语言，route.path 作为英文语言。  
+国际化提取函数定义在 `@/utils/i18n.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'),
-        }
-        ]
-    },
+/**
+ * 从路由提取国际化数据
+ * @param i18n
+ * @param routes
+ */
+function mergeI18nFromRoutes(i18n, routes) {
+  formatFullPath(routes)
+  const CN = generateI18n(new Object(), routes, 'name')
+  const US = generateI18n(new Object(), routes, 'path')
+  i18n.mergeLocaleMessage('CN', CN)
+  i18n.mergeLocaleMessage('US', US)
+  const messages = routesI18n.messages
+  Object.keys(messages).forEach(lang => {
+    i18n.mergeLocaleMessage(lang, messages[lang])
+  })
 }
-...
 ```
-那么你的 `@/router/i18n.js` 就应该是
+### 自定义
+如果你想自定义菜单国际化数据，可在 `@/router/i18n.js` 文件中配置。我们以路由的 path 作为 key（嵌套path 的写法也会被解析），name 作为 国际化语言的值。    
+假设你有一个路由的配置如下：
 ```js
-module.exports = {
-  messages: {
+[{
+  path: 'parent',
+  ...
+  children: [{
+    path: 'self',
+    ...
+  }]
+}]
+
+or 
+
+[{
+  path: 'other',
+  ...
+  children: [{
+    path: '/parent/self',   // 在国际化配置中 key 会解析为 parent.self
+    ...
+  }]
+}]
+```
+那么你需要在 `@/router/i18n.js` 中这样配置：
+```jsx
+ messages: {
     CN: {
-      dashboard: {
-        name: 'Dashboard',
-        workplace: {name: '工作台'},
-        analysis: {name: '分析页'}
+      parent: {
+        name: '父級菜單',
+        self: {name: '菜單名'},
     },
     US: {
-      dashboard: {
-        name: 'Dashboard',
-        workplace: {name: 'Workplace'},
-        analysis: {name: 'Analysis'}
+      parent: {
+        name: 'parent menu',
+        self: {name: 'menu name'},
     },
     HK: {
-      dashboard: {
-        name: 'Dashboard',
-        workplace: {name: '工作台'},
-        analysis: {name: '分析頁'}
+      parent: {
+        name: '父級菜單',
+        self: {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` ，新增一门语言 (多个同理)。