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文件

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