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)
    },
}
相关推荐
文心快码BaiduComate19 小时前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger19 小时前
python 通过selenium调用chrome浏览器
前端·chrome
passer98119 小时前
基于webpack的场景解决
前端·webpack
华科云商xiao徐19 小时前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手19 小时前
css3之grid布局
前端·css·css3
举个栗子dhy19 小时前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy19 小时前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵19 小时前
vue3和vue2生命周期的区别
前端·javascript·vue.js