|
|
|
|
@ -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: { |
|
|
|
|
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 ... |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
``` |
|
|
|
|
[{ |
|
|
|
|
path: 'parent', |
|
|
|
|
... |
|
|
|
|
children: [{ |
|
|
|
|
path: 'self', |
|
|
|
|
... |
|
|
|
|
}] |
|
|
|
|
}] |
|
|
|
|
|
|
|
|
|
以 `CN(中文)` 这个 `key` 为例，访问 `工作台(URL/dashboard/analysis)` 就相当于访问 `I18n.js` 文件的 `dashboard.analysis.name` 就能定位到菜单的所使用的语言。 |
|
|
|
|
or |
|
|
|
|
|
|
|
|
|
```JS |
|
|
|
|
// 如:你的访问的路由是 `URL/abc/edf/xxx` |
|
|
|
|
// @/router/config.js |
|
|
|
|
{ |
|
|
|
|
path: 'abc', |
|
|
|
|
name: '一级', |
|
|
|
|
children: [ |
|
|
|
|
{ |
|
|
|
|
path: 'edf', |
|
|
|
|
name: '二级', |
|
|
|
|
children: [ |
|
|
|
|
{ |
|
|
|
|
path: 'xxx', |
|
|
|
|
name: '三级', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
// @/router/i18n.js |
|
|
|
|
{ |
|
|
|
|
[{ |
|
|
|
|
path: 'other', |
|
|
|
|
... |
|
|
|
|
children: [{ |
|
|
|
|
path: '/parent/self', // 在国际化配置中 key 会解析为 parent.self |
|
|
|
|
... |
|
|
|
|
}] |
|
|
|
|
}] |
|
|
|
|
``` |
|
|
|
|
那么你需要在 `@/router/i18n.js` 中这样配置： |
|
|
|
|
```jsx |
|
|
|
|
messages: { |
|
|
|
|
CN: { |
|
|
|
|
abc: { |
|
|
|
|
name： '一级', |
|
|
|
|
edf: { |
|
|
|
|
name： '二级', |
|
|
|
|
xxx: { |
|
|
|
|
name: '三级' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
parent: { |
|
|
|
|
name: '父級菜單', |
|
|
|
|
self: {name: '菜單名'}, |
|
|
|
|
}, |
|
|
|
|
US: { |
|
|
|
|
abc: { |
|
|
|
|
name： 'one', |
|
|
|
|
edf: { |
|
|
|
|
name： 'two', |
|
|
|
|
xxx: { |
|
|
|
|
name: 'three' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
parent: { |
|
|
|
|
name: 'parent menu', |
|
|
|
|
self: {name: 'menu name'}, |
|
|
|
|
}, |
|
|
|
|
HK: { |
|
|
|
|
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` ，新增一门语言 (多个同理)。 |
|
|
|
|
|
|
|
|
|
|
chenghongxing
4 years ago