Vue中使用$t(‘xxx‘)实现中英文切换;

原文链接

介绍

{``{$t('key')}} :是VueI18n插件提供的函数,主要用于根据当前语言环境返回对应的翻译文本,以便在页面上显示多语言内容。
key:作为参数传递给函数$t()的字符串,用于指定需要翻译的文本的标识符或键值;这个标识符通常是一个在翻译文件中定义的键,用于查找对应的翻译文本。

工作原理

1.当调用$t('key')时,VueI18n插件会根据当前语言环境和给定的'key'来查找对应的翻译文本;

2.VueI18n插件会检查当前语言环境下的翻译文件(通常是JSON格式的文件),根据'key'查找对应的翻译文本;

3.如果找到了匹配的翻译文本,则返回该文本;否则,返回默认文本或者'key'本身。

Demo

html 复制代码
<template>
  <div class="support">
    <p>{{ $t('support') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped>
/* 样式可以根据需求自定义 */
</style>
javascript 复制代码
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"

bash 复制代码
import i18n from './language'

2.浏览器的语言环境不同,相应设置不同的语言配置文件

3.创建不同语言标识对应的文件。
index.js:

javascript 复制代码
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:

javascript 复制代码
//创建英文语言包对象
export default {
	lang: '中文',
    menus: {
        Home: 'Home',
        Careers:'Careers',
    },
   
}

zh.js:

javascript 复制代码
// 1、创建中文语言包对象
export default{
	lang: 'English',
    menus: {
        Home: '首页',
        Careers:'职业生涯',
    },
}

Demo.vue:

javascript 复制代码
//来一个可以中英文切换按钮
<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>
javascript 复制代码
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)
    },
}
相关推荐
李先静2 分钟前
AWTK-WEB 快速入门(1) - C 语言应用程序
c语言·开发语言·前端
MR·Feng11 分钟前
使用Electron将vue2项目打包为桌面exe安装包
前端·javascript·electron
萧大侠jdeps24 分钟前
图片生成视频-右进
前端·javascript·音视频
CSDN专家-赖老师(软件之家)27 分钟前
养老院管理系统+小程序项目需求分析文档
vue.js·人工智能·小程序·mybatis·springboot
Domain-zhuo1 小时前
JS对于数组去重都有哪些方法?
开发语言·前端·javascript
明月清风徐徐1 小时前
Vue实训---2-路由搭建
前端·javascript·vue.js
王解1 小时前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
葡萄城技术团队2 小时前
使用 前端技术 创建 QR 码生成器 API1
前端
DN金猿2 小时前
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)(很详细)
前端·vue.js·pdf
鸽鸽程序猿2 小时前
【前端】javaScript
开发语言·前端·javascript