集团网站建设哪家好,WordPress主题破解论坛,铁威马怎样做网站服务器,网站h1标签的应用最近在用 vue3 做一个后台管理系统#xff0c;之前是只考虑中文#xff0c;现在加了个需求是多语言。 本来也不是太难的需求#xff0c;但是我用的并不熟悉#xff0c;并且除了页面展示不同的语言#xff0c;需求是在切换语言的时候在几个页面中需要做出一些自定义的行为之前是只考虑中文现在加了个需求是多语言。 本来也不是太难的需求但是我用的并不熟悉并且除了页面展示不同的语言需求是在切换语言的时候在几个页面中需要做出一些自定义的行为所以需要监听语言的变化所以记录一下。 如上所述如果只是在页面中展示不同语言的文字还是很简单的只需要安装、配置 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,};
}
在要监听语言变化的页面
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();// htmlel-select changechangeLocale... // 代码/el-select希望对您有所帮助也希望路过的大佬不吝赐教
