vue3+vue-i18n 监听语言的切换

最近在用 vue3 做一个后台管理系统,之前是只考虑中文,现在加了个需求是多语言。

本来也不是太难的需求,但是我用的并不熟悉,并且除了页面展示不同的语言,需求是在切换语言的时候在几个页面中需要做出一些自定义的行为,所以需要监听语言的变化,所以记录一下。

如上所述,如果只是在页面中展示不同语言的文字,还是很简单的,只需要安装、配置 vue-i18n 之后,在页面中用 t('变量名')就行了(这里指的是 html 中,如果是 ts/js 中需要用 t 还要配置一下,如果有需要可以参考这里:vue3中使用vue-i18n

但之前没有关注监听语言变化并做出反应,功能做通了之后发现其实其实挺简单的。

复制代码
安装、配置 vue-i18n 可以参考 上篇文章 [vue3中使用vue-i18n ](https://blog.csdn.net/JaneLittle/article/details/127112273),假如在某个组件中要监听语言的变化:
1. 在 hooks 文件夹中建一个 locale.ts 文件,文件内容:

import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';

export default function useLocale() {
  const i18 = useI18n();
  const currentLocale = computed(() => {
    return i18.locale.value;
  });
  const changeLocale = (value: string) => {
    i18.locale.value = value;
    localStorage.setItem('arco-locale', value);
    Message.success(i18.t('navbar.action.locale'));
  };
  return {
    currentLocale,
    changeLocale,
  };
}
  1. 在要监听语言变化的页面

    import { watch } from 'vue';
    import useLocale from '@/hooks/locale'; // 引入

    const { currentLocale } = useLocale();
    watch(currentLocale, (newValue, oldValue) => {
    console.log('组件名----语言变化');
    console.log(newValue: ${newValue});
    console.log(oldValue: ${oldValue});
    });

这么看确实是挺简单的,并且在 ts 中如果不用 $t 用 i18.t 也挺方便的。

如果在不同的页面监听语言的变化并且做出统一的行为(比如提示"已经切换到某语言"),可以调用 changeLocale 方法:

复制代码
import useLocale from '@/hooks/locale';

  const { changeLocale } = useLocale();

  // html
  <el-select  @change="changeLocale">
    ...   // 代码
  </el-select>

希望对您有所帮助,也希望路过的大佬不吝赐教!

相关推荐
程序员码歌2 小时前
【零代码AI编程实战】AI灯塔导航-总结篇
android·前端·后端
用户21411832636022 小时前
免费玩转 AI 编程!Claude Code Router + Qwen3-Code 实战教程
前端
一枚小小程序员哈2 小时前
基于Vue + Node能源采购系统的设计与实现/基于express的能源管理系统#node.js
vue.js·node.js·express
小小愿望4 小时前
前端无法获取响应头(如 Content-Disposition)的原因与解决方案
前端·后端
小小愿望4 小时前
项目启功需要添加SKIP_PREFLIGHT_CHECK=true该怎么办?
前端
烛阴4 小时前
精简之道:TypeScript 参数属性 (Parameter Properties) 详解
前端·javascript·typescript
海上彼尚5 小时前
使用 npm-run-all2 简化你的 npm 脚本工作流
前端·npm·node.js
开发者小天5 小时前
为什么 /deep/ 现在不推荐使用?
前端·javascript·node.js
如白驹过隙6 小时前
cloudflare缓存配置
前端·缓存
excel6 小时前
JavaScript 异步编程全解析:Promise、Async/Await 与进阶技巧
前端