vue-router-tab/docs/guide/essentials/i18n.md

多语言支持

页签国际化

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

支持国际化的字段：

• title: 页签标题

• tips: 页签提示

定义国际化的方式：

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

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

  • 参考: 动态更新页签

配置自定义国际化方法

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

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

路由配置国际化页签

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。

指定组件显示为英文

<router-tab language="en"/>

自定义的语言 (参考配置)

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

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