最近要完成一个国际化的背景管理系统,但是遇到了一个问题,就是我在切换语言的时间,element 组件不更新,主要是main.js里头的 locale 语言没有更新,也就是main.js 只能在项目启动的时间后走一遍,其他页面跳转都不会走main.js, 所以导致了element plus 组件的国际语言没有更新,只能每次退出大概手动强制刷新项目大概页面才可能有效果,如许的话不符合前端需求呀,
花了几天的时间终于把这个问题解决了, 1.每次登录成功后,刷新整个项目页面 location.reload()
2.每次切换语言也刷新整个项目 location.reload()
第一步 下载 i18n依靠
第二步 编写好中文,英文文件,封装并创建 i18n文件
第三步. main.js中引入
整个i18n前端设置内容就都已完成 主要注意的一点就 main.js中 app.use中element 中英切换后 main.js不会重新执行 我们就得用location.reload() 可刷新整个页面
第四步 登录页面中的中英切换 登录成功 location.reload() 刷新页面
第五步 封装切换语言的组件 可在内部页面需要的地方调用组件 (element中中英切换主要是分页是否中英文切换了,如果每次中英文切换 分页组件库酿成中文大概英文,那就成功了)
- <template>
- <div class="language_title">
- <el-dropdown @command="handleCommand" trigger="click">
- <div class="language_wrapper">
- <span class="svg">
- <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-12008bb2=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>
- </span>
- <p>
- <span v-if="proxy.$i18n.locale == 'zh-CN'">简体中文</span>
- <span v-else>English</span>
- </p>
- <el-icon><caret-bottom /></el-icon>
- </div>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item command="zh-CN">
- <span>简体中文</span>
- </el-dropdown-item>
- <el-dropdown-item divided command="en-US">
- <span>English</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
- </template>
- <script setup>
- const { proxy } = getCurrentInstance();
- const router = useRouter();
- const redirect = ref(undefined);
- // 切换语言
- const handleCommand = (command) => {
- proxy.$i18n.locale = command
- sessionStorage.setItem('language', command)
- // 获取当前路由的路径
- redirect.value = router.currentRoute.value.path;
- //存本地
- sessionStorage.setItem('redirect', redirect.value)
- router.push({ path: redirect.value || "/index" });
- //登录后再次刷新整个项目走main.js 解决element-plus 语言切换问题
- location.reload()
- }
- </script>
- <style lang='scss' scoped>
- .language_title{
- display: flex;
- align-items: center;
- justify-content: center;
- .language_wrapper{
- display: flex;
- align-items: center;
- justify-content: center;
- span.svg{
- font-size: 24px;
- color:#333;
- }
- i.el-icon{
- color:#333;
- }
- p{
- color:#333;
- margin: 0 10px;
- font-size: 16px;
- }
- }
- }
- </style>
- html中使用
- <h2 class="title">{{ $t('title.name') }}</h2>
- script中使用
- //引入
- import { $t } from '@/lang/i18n'
- 定义data中使用
- const data = reactive({
- loginRules:{
- username: [{ required: true, trigger: "blur", message: $t('login.captcha.username') }],
- password: [{ required: true, trigger: "blur", message: $t('login.captcha.password') }],
- code: [{ required: true, trigger: "change", message: $t('login.captcha.code') }]
- }
- })
- 方法中使用
- const handleCommand = (command) => {
- proxy.$i18n.locale = command
- sessionStorage.setItem('language', command)
- loginRules.value.username[0].message = $t('login.captcha.username')
- loginRules.value.password[0].message = $t('login.captcha.password')
- loginRules.value.code[0].message = $t('login.captcha.code')
- proxy.$modal.msgSuccess($t('language.message'));
- }
下面就是若依框架中的菜单怎样中英切换,和 字典的中英切换,前端如那边理,缺点就是每次项目需要迭代添加字典大概菜单,前端需要调整, 最好的办法是 后端做处理返回给前端,前端在哀求头把语言发送给后端
可直接在菜单渲染在页面的时间做文章,
可直接在字典渲染在页面的时间做文章,
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
