# 多语言支持


## 页签国际化

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

#### 支持国际化的字段：

- `title`: 页签标题

- `tips`: 页签提示
  

#### 定义国际化的方式：

- `'i18n:custom.i18n.key'`: 字符串方式， `i18n:` 前缀 + 国际化字段的 `key`

- `['custom.i18n.key', ...params]`: 数组方式，第一项为国际化字段的 `key`，后面为参数列表。适用于动态的国际化内容。
  - 参考: [动态更新页签](../advanced/dynamic-tab-info.md#动态更新页签)


<doc-links api="#i18n" demo="/i18n/"></doc-links>


**配置自定义国际化方法**

``` html {2,9}
<template>
  <router-tab :i18n="i18n" />
</template>

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


**路由配置国际化页签**
``` javascript {5,7,13}
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', // 页签图标，可选
  }
}]
```



## 组件语言

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


`RouterTab` 默认语言是 `zh-CN`，另外内置了 `en`。

<doc-links api="#language" demo="/lang-en/"></doc-links>

**指定组件显示为英文**

``` html
<router-tab language="en"/>
```

**自定义的语言** ([参考配置](https://github.com/bhuh12/vue-router-tab/blob/dev/src/lang/en.js))

``` html
<router-tab :language="customLanguage"/>
```

``` javascript
export default {
  data () {
    return {
      customLanguage: {
        ...
      }
    }
  }
}
```