update docs;

chenghongxing

2020-12-06 33179d96b7da1310d6975214273698a97bd1cb27

update docs;

 docs/advance/i18n.md

@@ -8,150 +8,74 @@
> 如果你还没有看快速入门，请先移步查看: [页面 -> 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` ，新增一门语言 (多个同理)。