# 多语言支持

# 页签国际化

# 一. 配置自定义国际化方法

RouterTab 组件提供了 i18n 属性，用以配置自定义的国际化转换方法，从而实现路由页签的多语言展示。

示例：

<template>
  <router-tab :i18n="i18n" />
</template>

<script>
  export default {
    methods: {
      // 自定义国际化转换方法
      i18n(key, params) {
        // $getI18n 为实际项目中的全局国际化方法
        return this.$getI18n(key, params)
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 二. 路由配置页签国际化

页签支持国际化的字段有： title 页签标题，tips 页签提示

定义国际化的方式：

'i18n:custom.i18n.key' 字符串方式: i18n: 前缀 + 国际化字段的 key
['custom.i18n.key', ...params] 数组方式: 第一项为国际化字段的 key，后面为参数列表。适用于动态的国际化内容。

参考: 动态页签

const routes = [
  {
    path: '/page1',
    component: pageComponent,
    meta: {
      title: 'i18n:routerTab.page1', // 通过配置 'i18n:key' 的方式来设置国际化字段 'routerTab.page1'
      icon: 'icon-user', // 页签图标，可选
      tips: 'i18n:routerTab.page1Tips' // 页签提示同样支持国际化
    }
  },
  {
    path: '/page2',
    component: pageComponent,
    meta: {
      title: ['routerTab.page2'], // 通过数组方式来设置国际化字段 'routerTab.page2'
      icon: 'icon-user' // 页签图标，可选
    }
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 组件语言

通过配置 RouterTab 组件的 lang 属性，可以设置组件显示的语言 (主要表现为页签右键菜单)。

RouterTab 默认会根据浏览器语言自动识别组件语言。

目前组件内置的语言有：'zh'、'en'。

API Demo

指定组件显示为英文

<router-tab lang="en" />

自定义的语言 (参考配置 (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

← 右键菜单页签行为 →