(原文链接)
介绍
{{$t('key')}}
:是VueI18n插件提供的函数,主要用于根据当前语言环境返回对应的翻译文本,以便在页面上显示多语言内容。
key:
作为参数传递给函数$t()
的字符串,用于指定需要翻译的文本的标识符或键值;这个标识符通常是一个在翻译文件中定义的键,用于查找对应的翻译文本。
工作原理
1.当调用$t(‘key’)时,VueI18n插件会根据当前语言环境和给定的’key’来查找对应的翻译文本;
2.VueI18n插件会检查当前语言环境下的翻译文件(通常是JSON格式的文件),根据’key’查找对应的翻译文本;
3.如果找到了匹配的翻译文本,则返回该文本;否则,返回默认文本或者’key’本身。
Demo
<template><div class="support"><p>{{ $t('support') }}</p></div>
</template><script>
export default {data() {return {};}
};
</script><style scoped>
/* 样式可以根据需求自定义 */
</style>
const i18n = new VueI18n({locale: 'zh',messages: {'zh': {hello: '你好',support: '技术支持:Vue.js 社区'},'en': {hello: 'hello',support: 'Technical Support: Vue.js Community'}}
});
步骤
案例:点击默认中文后切换为英文,如:中文变英文;首页变Home;职业生涯变Careers展示;
1.需要在main.js中引入vue-i18n(版本:"vue-i18n": "^9.2.2"
)
import i18n from './language'
2.浏览器的语言环境不同,相应设置不同的语言配置文件
3.创建不同语言标识对应的文件。
index.js:
import { createI18n } from "vue-i18n"; //引入vue-i18n组件
import zh from "./zh";
import en from "./en";
//注册i18n实例并引入语言文件const i18n = createI18n({locale: localStorage.getItem("lang") || "en", // 语言标识(缓存里面没有就用中文)fallbackLocale: "zh", //没有英文的时候默认中文语言messages: {en, zh}
});export default i18n;
en.js:
//创建英文语言包对象
export default {lang: '中文',menus: {Home: 'Home',Careers:'Careers',},}
zh.js:
// 1、创建中文语言包对象
export default{lang: 'English',menus: {Home: '首页',Careers:'职业生涯',},
}
Demo.vue:
//来一个可以中英文切换按钮
<el-button class="item" type="text" @click="exchangeLanguage( this.$t('lang'))"><div>{{ this.$i18n.t('lang') }}</div>
</el-button><div class="item1" @click="aClick">{{ $i18n.t('menus.Home') }}</div>
<div class="item2" @click="jump">{{ $i18n.t('menus.Careers') }}</div>
data() {return {zh: this.$i18n.locale.includes("z"),en: this.$i18n.locale.includes("e"),}
},
created() {window.localStorage.setItem("lang", this.$i18n.locale);console.log("zh还是en" ,this.$i18n.locale)},methods: {//点击导航在新窗口显示目标网页aClick() {if (item.value === "menus.Home"){this.$router.push({ name: 'demo1Path' });//首页}},jump() {let route = this.$router.resolve({name: 'demo2Path'});window.open(route.href, '_blank');//职业生涯},//点击切换中英文exchangeLanguage(value) {if (value === 'English') {this.$i18n.locale = 'en';//localStorage.setItem 将 "lang" 的值设置为 "en",使用 i18n 的英文作为默认语言localStorage.setItem("lang", "en");} else if (value === '中文') {this.$i18n.locale = 'zh';//localStorage.setItem 将 "lang" 的值设置为 "zh",使用 i18n 的中文作为默认语言localStorage.setItem("lang", "zh");}console.log("this.$i18n.locale:是en还是zh", this.$i18n.locale)},
}