update docs;

master
chenghongxing 4 years ago
parent 935cd77d4f
commit 33179d96b7
  1. 186
      docs/advance/i18n.md

@ -8,150 +8,74 @@ vue-antd-admin 采用 [vue-i18n](https://kazupon.github.io/vue-i18n/) 插件来
> 如果你还没有看快速入门,请先移步查看: [页面 -> i18n国际化配置](../develop/page.html#i18n国际化配置) > 如果你还没有看快速入门,请先移步查看: [页面 -> i18n国际化配置](../develop/page.html#i18n国际化配置)
## 菜单国际化(配置路由国际化) ## 菜单和路由
如果你有一个路由是这样的 `@/router/config.js`
### 默认情况
如果你没有对菜单进行国际化配置,admin 默认会从路由数据中提取数据作为国际化配置。route.name 作为中文语言,route.path 作为英文语言。
国际化提取函数定义在 `@/utils/i18n.js` 文件中,会在路由加载时调用,如下:
```js ```js
... /**
{ * 从路由提取国际化数据
path: '/', * @param i18n
name: '首页', * @param routes
component: TabsView, */
redirect: '/login', function mergeI18nFromRoutes(i18n, routes) {
children: [ formatFullPath(routes)
{ const CN = generateI18n(new Object(), routes, 'name')
path: 'dashboard', const US = generateI18n(new Object(), routes, 'path')
name: 'Dashboard', i18n.mergeLocaleMessage('CN', CN)
meta: { i18n.mergeLocaleMessage('US', US)
icon: 'dashboard' const messages = routesI18n.messages
}, Object.keys(messages).forEach(lang => {
component: BlankView, i18n.mergeLocaleMessage(lang, messages[lang])
children: [ })
{
path: 'workplace',
name: '工作台',
meta: {
page: {
closable: false
}
},
component: () => import('@/pages/dashboard/workplace'),
},
{
path: 'analysis',
name: '分析页',
component: () => import('@/pages/dashboard/analysis'),
}
]
},
} }
...
``` ```
那么你的 `@/router/i18n.js` 就应该是 ### 自定义
如果你想自定义菜单国际化数据,可在 `@/router/i18n.js` 文件中配置。我们以路由的 path 作为 key(嵌套path 的写法也会被解析),name 作为 国际化语言的值。
假设你有一个路由的配置如下:
```js ```js
module.exports = { [{
messages: { path: 'parent',
CN: { ...
dashboard: { children: [{
name: 'Dashboard', path: 'self',
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` 就能定位到菜单的所使用的语言。 or
```JS [{
// 如:你的访问的路由是 `URL/abc/edf/xxx` path: 'other',
// @/router/config.js ...
{ children: [{
path: 'abc', path: '/parent/self', // 在国际化配置中 key 会解析为 parent.self
name: '一级', ...
children: [ }]
{ }]
path: 'edf', ```
name: '二级', 那么你需要在 `@/router/i18n.js` 中这样配置:
children: [ ```jsx
{ messages: {
path: 'xxx',
name: '三级',
}
}
]
}
// @/router/i18n.js
{
CN: { CN: {
abc: { parent: {
name: '一级', name: '父級菜單',
edf: { self: {name: '菜單名'},
name: '二级',
xxx: {
name: '三级'
}
},
}, },
US: { US: {
abc: { parent: {
name: 'one', name: 'parent menu',
edf: { self: {name: 'menu name'},
name: 'two', },
xxx: { HK: {
name: 'three' parent: {
} name: '父級菜單',
}, self: {name: '菜單名'},
}, },
// 其他语言
}
```
### 小技巧(公有语言包)
项目里面肯定有很多通用或者复用性很高的语言,比如 `添加`、`删除`、等共用的语言也可以写到 `@/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` ,新增一门语言 (多个同理)。 首先在 `@/layouts/header/AdminHeader.vue` ,新增一门语言 (多个同理)。

Loading…
Cancel
Save