在vue和 js 、ts 数据中使用 vue-i18n,切换语言环境时,标签文本实时变化

我的项目需要显示两种语言(中文和英文),并且我想要切换语言时,页面语言环境会随之改变,目前发现,只能在vue中使用$t(‘’)的方式使用,但是这种方式只能在vue中使用,而我的菜单文件是定义在js中,在vue中遍历显示的,所以我开始尝试用标签代替我原本的字符串

我目前使用的vue-i18n版本是9

这是我原本的菜单列表,是直接显示中文文本
在这里插入图片描述

这是我的菜单栏页面,我想要点击切换之后,页面就能实时改变,
vue-i18n在vue文件中使用$t('')的方式时正常实时改变的,一切换语言,页面不能刷新就能随着改变,但是定义在js中的菜单文件就不同,它无法在js中使$t('')

在这里插入图片描述
这是我定义语言的两个文件en.js 和 zhHans.js
在这里插入图片描述
在这里插入图片描述

刚开始我尝试的方法是i18n.global.t('menuName.home') 的方式,但是我发现每次切换语言环境,都需要刷新页面才能显示,并不能实现我想要的效果,用i18n.global.t(‘menuName.home’)这种方式,切换语言环境时,vue中会实时变化,js文件中的不会
在这里插入图片描述
于是我就想到$t(' ')其实就相当于一个翻译函数,既然在js中使用i18n.global.t 首次是能正常翻译的,那我为何不将它封装成一个方法在vue页面中调用呢,毕竟它在vue中是响应变化的

普通vue页面使用官方方式$t('')即可
在这里插入图片描述


!!!在js中定义的字段就需要额外翻译一下,在vue中使用,这样就可以在修改语言环境时实时改变

1、 封装翻译函数

我封装在common-utils.js中的方法

// i18n 语言翻译处理
import i18n from '@/plugins/i18n'   //这是我的i18n.js路径,根据自己情况引入
export function translate(key) {return i18n.global.t(key)
}

2、vue页面中调用

<script setup>
//引入翻译方法
import {translate}from '@/utils/common-utils'
</script>

在遍历菜单的模板中需要动态语言的地方直接调用方法即可
在这里插入图片描述
当然,不要忘记把我们在js中定义的菜单将文本修改为关键标签

将原本固定的“我的主页”修改为我们自定义的menuName.home

在这里插入图片描述
这样就可以实现我切换语言环境后,页面就会实时的改变,无需刷新或其它操作
在这里插入图片描述

我这里只是针对js文件中定义的文本如何实现国际化 ,做一个记录,也帮助一下遇到同样问题的朋友

至于安装使用vue-i18n的步骤及其配置,其它教程或官网很清晰了,这里就不过多说明,

vue-i18n官网:https://vue-i18n.intlify.dev/guide/installation.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/811781.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gpt系列概述——从gpt1到chatgpt

GPT建模实战&#xff1a;GPT建模与预测实战-CSDN博客 OpenAI的GPT&#xff08;Generative Pre-trained Transformer&#xff09;系列模型是自然语言处理领域的重要里程碑。从2018年至2020年&#xff0c;该公司相继推出了GPT-1、GPT-2和GPT-3&#xff0c;这些模型在文本生…

CTFshow电子取证——内存取证1

关于内存与注册表 内存中的注册表项 当Windows操作系统启动时&#xff0c;它会将注册表的部分数据加载到内存中&#xff0c;以便系统和应用程序可以快速地访问这些信息。这些数据在内存中可以更快地被读取和修改&#xff0c;以便系统能够动态地调整其行为和配置。 系统性能和…

工业相机飞拍功能的介绍(转载学习)

转载至&#xff1a; https://baijiahao.baidu.com/s?id1781438589726948322&wfrspider&forpc

办公软件巨头CCED、WPS迎来新挑战,新款办公软件已形成普及之势

办公软件巨头CCED、WPS的成长经历 CCED与WPS&#xff0c;这两者均是中国办公软件行业的佼佼者&#xff0c;为人们所熟知。 然而&#xff0c;它们的成功并非一蹴而就&#xff0c;而是经过了长时间的积累与沉淀。 CCED&#xff0c;这款中国大陆早期的文本编辑器&#xff0c;在上…

【vue】购物车案例优化

对 购物车案例 进行优化 用watch实现全选/取消全选用watch实现全选状态的检查用computed计算总价格 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…

014:vue3 van-list van-pull-refresh实现上拉加载,下拉刷新

文章目录 1. 实现上拉加载&#xff0c;下拉刷新效果2. van-list&#xff0c;van-pull-refresh组件详解2.1 van-list组件2.2 van-pull-refresh组件 3. 完整案例4. 坑点&#xff1a;加载页面会一直调用加载接口 1. 实现上拉加载&#xff0c;下拉刷新效果 通过下拉刷新加载下一页…

淘宝扭蛋机小程序:扭出惊喜,乐享购物新体验

在快节奏的现代生活中&#xff0c;人们总是在寻找新鲜、有趣的娱乐方式。淘宝扭蛋机小程序应运而生&#xff0c;为您带来前所未有的购物与娱乐结合新体验。在这里&#xff0c;每一次的扭动都充满惊喜&#xff0c;每一次的点击都带来乐趣&#xff0c;让您在购物的同时&#xff0…

4.Labview簇、变体与类(上)

在Labview中&#xff0c;何为簇与变体&#xff0c;何为类&#xff1f;应该如何理解&#xff1f;具体有什么应用场景&#xff1f; 本文基于Labview软件&#xff0c;独到的讲解了簇与变体与类函数的使用方法和场景&#xff0c;从理论上讲解其数据流的底层概念&#xff0c;从实践上…

汽车维修类中译英的英语翻译

近年来&#xff0c;随着全球化的加速和汽车市场的不断扩大&#xff0c;汽车维修领域的交流与合作也日益频繁。汽车维修类中译英的英语翻译在汽车行业中扮演着至关重要的角色。那么&#xff0c;针对汽车维修类翻译&#xff0c;中译英的英语翻译有何技巧&#xff1f; 业内人士指出…

Linux 系统解压缩文件

Linux系统&#xff0c;可以使用unzip命令来解压zip文件 方法如下 1. 打开终端&#xff0c;在命令行中输入以下命令来安装unzip&#xff1a; sudo apt-get install unzip 1 2. 假设你想要将zip文件解压缩到名为"target_dir"的目录中&#xff0c;在终端中切换到目标路…

C#/.NET/.NET Core拾遗补漏合集(24年4月更新)

前言 在这个快速发展的技术世界中&#xff0c;时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NET Core拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节&#xff0c;以帮助大家更全面地了解这些技术栈的特性和发展方向。 GitHub开源地…

Java中的单元测试Junit框架

单元测试 概述与以往的测试比较 Junit框架快速入门优点测试步骤断言机制 自动化测试 Junit框架常见注解 概述 针对最小的功能单元&#xff08;方法&#xff09;&#xff0c;编写测试代码对其进行正确性测试 与以往的测试比较 只能在main方法编写测试代码&#xff0c;去调用其…

Python实现PDF页面的删除与添加

在处理PDF文档的过程中&#xff0c;我们时常会需要对PDF文档中的页面进行编辑操作的情况&#xff0c;如插入和删除页面。通过添加和删除PDF页面&#xff0c;我们可以增加内容或对不需要的内容进行删除&#xff0c;使文档内容更符合需求。而通过Python实现PDF文档中的插入和删除…

微服务学习 Eureka注册中心

服务调用时候出现问题&#xff0c;当服务者很多时候&#xff0c;比如不同的端口。消费者如何找到服务者的地址&#xff1f;又如何判断服务者是否健康。 Eureka基本原理&#xff1a; 总结:如果有多个服务提供者&#xff0c;消费者该如何选择&#xff1f; 搭建Eureka注册中心: 1.…

LeetCode-72. 编辑距离【字符串 动态规划】

LeetCode-72. 编辑距离【字符串 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;动规五部曲解题思路二&#xff1a;动态规划【版本二】解题思路三&#xff1a;0 题目描述&#xff1a; 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最…

找出mongodb的jumbo块并进行分裂

https://www.cnblogs.com/abclife/p/15968628.html 根据这篇文档中的脚本&#xff0c;在我们自己的环境中跑了下&#xff0c;第一次跑的结果如下&#xff1a; 运行完上面跑出的split脚本后&#xff0c;还是存在jumbo块&#xff0c;第二次跑出的结果&#xff1a; 从上面结果可以…

PostgreSQL15 + PostGis + QGIS安装教程

目录 下载1、PostgreSQL安装1.1、环境变量配置 2、PostGIS安装2.1、安装插件 3、QGIS下载3.1、安装3.2、测试 下载 PostgreSQL15安装&#xff1a;下载地址 PostGIS安装&#xff1a;下载地址&#xff08;倒数第二个&#xff09; 1、PostgreSQL安装 下载安装包之后一直点下一步…

Python 版分布式消息队列 Kafka 实现图片数据传输

1、Kafka 介绍 在使用 Kafka 之前&#xff0c;通常需要先安装和配置 ZooKeeper。ZooKeeper 是 Kafka 的依赖项之一&#xff0c;它用于协调和管理 Kafka 集群的状态。 ZooKeeper 是一个开源的分布式协调服务&#xff0c;它提供了可靠的数据存储和协调机制&#xff0c;用于协调…

清远某国企IBM服务器Board故障上门维修

接到一台来自广东清远市清城区某水利大坝国企单位报修一台IBM System x3650 M4服务器无法开机的故障&#xff0c;分享给大家&#xff0c;同时也方便有需要的朋友能及时找到我们快速解决服务器问题。 故障服务器型号&#xff1a;IBM System x3650 M4 服务器使用单位&#xff1a;…

厂区3D全景线上漫游体验突破现实时空阻碍

智慧园区&#xff0c;作为现代城市发展的重要引擎&#xff0c;其管理效率和安全监控的需求日益凸显。而720VR全景展示技术的引入&#xff0c;无疑为智慧园区的建设注入了新的活力。通过360全空间无死角的视觉展示&#xff0c;用户可以身临其境地感受园区的每一个角落&#xff0…