我们可以使用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
}