mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
update docs;
This commit is contained in:
chenghongxing
parent
935cd77d4f
commit
33179d96b7
@ -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',
|
||||||
|
...
|
||||||
|
children: [{
|
||||||
|
path: 'self',
|
||||||
|
...
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
|
||||||
|
or
|
||||||
|
|
||||||
|
[{
|
||||||
|
path: 'other',
|
||||||
|
...
|
||||||
|
children: [{
|
||||||
|
path: '/parent/self', // 在国际化配置中 key 会解析为 parent.self
|
||||||
|
...
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
```
|
||||||
|
那么你需要在 `@/router/i18n.js` 中这样配置：
|
||||||
|
```jsx
|
||||||
|
messages: {
|
||||||
CN: {
|
CN: {
|
||||||
dashboard: {
|
parent: {
|
||||||
name: 'Dashboard',
|
name: '父級菜單',
|
||||||
workplace: {name: '工作台'},
|
self: {name: '菜單名'},
|
||||||
analysis: {name: '分析页'}
|
|
||||||
},
|
},
|
||||||
US: {
|
US: {
|
||||||
dashboard: {
|
parent: {
|
||||||
name: 'Dashboard',
|
name: 'parent menu',
|
||||||
workplace: {name: 'Workplace'},
|
self: {name: 'menu name'},
|
||||||
analysis: {name: 'Analysis'}
|
|
||||||
},
|
},
|
||||||
HK: {
|
HK: {
|
||||||
dashboard: {
|
parent: {
|
||||||
name: 'Dashboard',
|
name: '父級菜單',
|
||||||
workplace: {name: '工作台'},
|
self: {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` ，新增一门语言 (多个同理)。
|
首先在 `@/layouts/header/AdminHeader.vue` ，新增一门语言 (多个同理)。
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user