vue3 使用vue-i18njie解决切换语言不更新问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
场景:我这里做的不是点击按钮切换语言,是从地址栏里取不同的语言时需要更新数据
问题:地址栏语言的传参变换后,页面的展示的数据还是翻译的上一个语言的数据,需要再次刷新才正确
解决: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>
结果:页面渲染的数据就是当前地址栏取到的语言所对应的翻译数据
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)