当前位置: 首页 > news >正文

解决VueI18n使用浏览器插件翻译后,切换国际化失效的问题

问题复现

在使用Vue-i18n对页面进行国际化的时候,使用浏览器翻译插件(如腾讯翻译)后,切换国际化语言,随后当我们关闭浏览器翻译插件后,再次切换国际化语言,原来被翻译的文字无法正确切换

出现原因

浏览器翻译插件对文本翻译时使用了display对原文本进行修改,当关闭浏览器翻译插件后,没有触发浏览器的重排机制,所以没有导致vue并没有刷新dom

解决办法

给失效的页面组件使用key绑定,当切换语言的时候,使得Vue的Diff算法能够识别到虚拟dom的改变从而重新渲染DOM以此解决此问题

<template>
 <div :key="locale">
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
</script>

相关文章:

  • Jupyter notebook的安装与使用
  • 共享内存shm_size和内存锁ulimits.memlock配置
  • Flutter_学习记录_connectivity_plus 检测网络
  • java简单基础学习
  • 利用pprof对golang进行性能分析
  • 图片填充容器,如何描述
  • Flutter 边框按钮:OutlinedButton 完全手册与设计最佳实践
  • Java集成WebSocket实现消息推送,详细步骤以及出现的问题如何解决
  • LeetCode 解题思路 18(Hot 100)
  • ESP32移植Openharmony外设篇(10)inmp441麦克风
  • 【接口耗时】⭐️自定义拦截器实现接口耗时统计
  • 基于消息方式的系统间通信
  • (分块)洛谷 P2801 教主的魔法 题解
  • TimeGAN:开启时间序列生成新纪元,结合GAN与自回归模型的优势
  • 智能运维管理系统的主要优势
  • 基于asp.net实现的连锁餐厅收银系统[包运行成功+永久免费答疑辅导]
  • 4、linux c 进程
  • RK3568 android11 基于PN7160的NXP NFC移植
  • C++基础——从C语言快速入门
  • 前端权限系统
  • 广西隆林发生一起山洪灾害,致4人遇难
  • 王毅同丹麦外交大臣会谈,表示在格陵兰问题充分尊重丹麦主权和领土完整
  • 媒体:多家国有大行存款利率即将迎来新一轮下调
  • 大学2025丨苏大教授王尧:文科最大的危机是阐释世界的能力弱化
  • “上海-日喀则”援藏入境旅游包机在沪首航
  • 上海公办小学验证今起开始,下周一和周二分区进行民办摇号