vue3 使用vue-i18njie解决切换语言不更新问题

场景：我这里做的不是点击按钮切换语言，是从地址栏里取不同的语言时需要更新数据

问题：地址栏语言的传参变换后，页面的展示的数据还是翻译的上一个语言的数据，需要再次刷新才正确

解决：proxy.$i18n.locale = 当前语言;

具体使用如下：

使用版本：

package.json文件

"vue": "^3.2.45",
"vue-i18n": "^9.2.2",

1、安装： npm install vue-i18n@next 这样装的最新版的才能在vue3.0使用

2、使用：

main.js文件

import { createApp } from "vue";
import App from "./App.vue";
...
import i18n from "./i18n";

const app = createApp(App);
app.use(i18n);
...

app.mount("#app");

建文件

i18n/index.js文件

import { createI18n } from "vue-i18n";
import ZH from "./zh.js";
import EN from "./en.js";
import ES from "./es.js";
import PT from "./pt.js";
const messages = {
  zh: { ...ZH },
  en: { ...EN },
  es: { ...ES },
  pt: { ...PT },
};

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: localStorage.getItem("language") || "en",
  messages,
});
export default i18n;

App.vue文件

<script setup>
import { onMounted, getCurrentInstance } from "vue";
import { transformParams } from "@/utils/tool.js";
let { proxy } = getCurrentInstance()
onMounted(() => {
  const { language } = transformParams();
  localStorage.setItem("language", language ?? "en");
  // 关键之处在这里
  proxy.$i18n.locale = language; // 切换当前语言环境
});
</script>

<template>
  <RouterView />
</template>

<style lang="scss">
...
</style>

结果：页面渲染的数据就是当前地址栏取到的语言所对应的翻译数据

vue3 使用vue-i18njie解决切换语言不更新问题

猜你喜欢