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>

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

相关推荐
Kx…………1 小时前
Day2:前端项目uniapp壁纸实战
前端·学习·uni-app·实战·项目
gqkmiss1 小时前
Git Cherry-pick:核心命令、实践详解
前端·git·前端框架·commit·cherry-pick
不想上班只想要钱2 小时前
vue面试题
前端·javascript·vue.js
拉不动的猪2 小时前
简单回顾下es6增数组方法
前端·javascript·面试
Alkaid:2 小时前
解决Long类型前端精度丢失和正常传回后端问题
java·前端·javascript·vue.js
Code额3 小时前
Vue 框架组件间通信方式
前端·vue.js·前端框架
玖玖passion3 小时前
即时响应之道:深入浅出Server-Sent Events
前端
无名之逆4 小时前
[特殊字符] Hyperlane:Rust 高性能 HTTP 服务器库,开启 Web 服务新纪元!
java·服务器·开发语言·前端·网络·http·rust
今天吃了嘛o4 小时前
vue中根据html动态渲染内容2.0
vue.js·elementui·html
程序饲养员4 小时前
使用React Router 7.5进行静态站点生成(SSG)教程
前端·javascript·react.js