vue-i18n实现国际化的语言切换用法

我们可以使用vue-i18n实现国际化。

语言切换用法如下：

静态渲染：

1.将属性值前加上冒号，用$t('xx.yy')进行语言切换。

<el-form-item
  :label="$t('visitorRecord.name')"
  prop="hostName"
  label-width="60px"
>
  <el-col :span="18">
    <el-input
      v-model="searchName"
      :rows="3"
      clearable
      type="text"
      :placeholder="$t('visitorRecord.enterName')"
    />
  </el-col>
</el-form-item>

2.用双花括号加$t('xx.yy')进行语言切换。

<el-dropdown-item command="">{{$t('common.all')}}</el-dropdown-item>

动态渲染：

即在js中用this.$t('xx.yy')进行语言切换。

this.dropValue = this.$t('common.all')

ps:

this.$te这个方法用以判断需要翻译的key在你提供的语言包中是否存在。

应用示例为

export function generateTitle(title) {
  const hasKey = this.$te('route.' + title)
  if (hasKey) {
    const translatedTitle = this.$t('route.' + title)
    return translatedTitle
  }
  return title
}