# I18n
# I18n for Tabs
# 1. specify custom method on <router-tab>
Property i18n of RouterTab takes custom method for internationalization.
Example:
<template>
<router-tab :i18n="i18n" />
</template>
<script>
export default {
methods: {
// custom method
i18n(key, params) {
// $getI18n() is the global method for internationalization in real projects
return this.$getI18n(key, params)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 2. specify key in route config
As of yet there are two fields supporting i18n: title and tips.
Mode:
'i18n:custom.i18n.key'string mode: prefixi18n:+ your customkeyPath['custom.i18n.key', ...params]array mode: first your customkeyPath, then followed by arguments. Usually for dynamic tab info.
See: Dynamic Tab Info
const routes = [
{
path: '/page1',
component: pageComponent,
meta: {
title: 'i18n:routerTab.page1', // string mode
icon: 'icon-user', // optional
tips: 'i18n:routerTab.page1Tips'
}
},
{
path: '/page2',
component: pageComponent,
meta: {
title: ['routerTab.page2'], // array mode
icon: 'icon-user' // optional
}
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# I18n for Components
By specifying property lang on RouterTab, you could set component's display language. (Mainly affecting context menu so far)
By default, RouterTab will automatically recognize the component language according to the browser language.
Currently, the built-in languages of the component are: 'zh' and 'en'.
Specify language
<router-tab lang="en" />
1
Custom language (Example Config (opens new window))
<template>
<router-tab :lang="customLanguage" />
</template>
<script>
export default {
name: 'LangCustom',
data() {
return {
customLanguage: {
tab: {
untitled: 'Untitled Page'
},
contextmenu: {
refresh: 'Refresh This',
refreshAll: 'Refresh All',
close: 'Close This',
closeLefts: 'Close to the Left',
closeRights: 'Close to the Right',
closeOthers: 'Close Others'
},
msg: {
keepLastTab: 'Keep at least 1 tab'
}
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31