vue-i18n语言，页面刷新，设置的语言初始化问题解决

最新推荐文章于 2024-06-22 11:03:07 发布
最新推荐文章于 2024-06-22 11:03:07 发布
阅读量2.9k 收藏 3
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MyCloisonne/article/details/119912226
版权

可以对选择的语言进行本地存储，localStorage保存后刷新页面获取本地语言。

1、vue国际化Dropdown使用页面，在handleCommand方法里，把切换的语言储存到localStorage

 

 2、在挂载到main文件的language.js中，把i18n对象的储存语言获取，默认值 'zh' 中文

 

MyCloisonne
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
I18n实现中英文切换
江城守望者
12-12 5016
Rails I18n API框架提供了 Rails 应用国际化/本地化所需的全部必要支持，可以很容易的实现网站语言的切换。配置I18n模块Rails 会把 config/locales 文件夹中的 .rb 和 .yml 文件自动添加到翻译文件加载路径中，默认的翻译文件是config/locales/en.yml，假如我们需要使用自定义的翻译文件config/locales/zh.yml作为默认翻译，
Vue或UniApp 前端语言国际化 i18n lang.js包
06-23
然后，在主应用文件中，导入并初始化`vue-i18n`，指定语言资源： ```javascript import Vue from 'vue' import VueI18n from 'vue-i18n' import messages from './lang.js' Vue.use(VueI18n) const i18n = new ...
vue-i18n语言，页面刷新字体恢复默认问题解决
Kobeloveu
08-12 3316
用vue-i18n实现多语言翻译，简单方便！然而在实现多语言切换后，发现一个问题，就是切换语言后，刷新页面后，页面又恢复到默认语言，这很尴尬。 在查阅资料后，寻找到一种解决办法。废话少说，上代码 1、第一步把 切换语言储存到localStorage // 语言切换 handleCommand(command) { if (command == "ZH") { ...
记录vue使用国际化i18n的一个坑
qq_54024268的博客
11-12 1533
项目中用到国际化。切换语言是独立的一个页面，点击切换后进去语言没改变，必须手动刷新才会改变。 解决方法：切换语言的方法加上一个赋值 methods: { onCh() { this.$i18n.locale = "zh" // 赋值后完美解决 sessionStorage.setItem("lang","zh") }, onEn() { this.$i18n.locale = "en" sessionStorage.setIt
【国际化I18n使用方法】vue2使用i18简单实现多语种切换，刷新保持，动态数据处理
最新发布
seeeeeeeeeee的博客
06-22 1053
这句话的意思就是有缓存的话拿缓存的语言类型，没有就默认用中文的，然后你就可以全局都刷新保持语言类型了。总结就是，安装好插件后，配置几个语言的js文件，每个词都要在每个js内写一遍对应的语言，然后通过切换js文件拿到对应的语言，实现翻译的效果。1，在你的语言文件内用花括号然后内部用一个变量接收，在你的也没事，调用$t 的时候，第二个参数传一个对象，里面分别是你对应括号内的名字和值就可以实现动态数据。1，你在某一个设置语言的页面切换语言，然后把切换的比如从zh切换到en。然后把en保存到本地缓存里。
Vue项目：iView & vue-i18n & echarts遇到的问题和解决方法
Alice_hhu的博客
04-14 3322
vue-i18n & echarts遇到的问题和解决方法data中的预置数据echarts图表中的 tooltip、markline等 data中的预置数据 data中的数据初始化一次之后，不手动修改是不会变化的，所以直接在data中使用this.$t('xxx')，只有页面首次加载是有效的，中途切换的话，是没办法跟着切换的。 解决方法： 将需要用到国际化的数据定义在computed里面...
前端国际化插件 - i18n 在vue中使用踩到的坑(无法在初始化的data中正常使用)
如需咨询可联系我，V：chen2318341674
10-26 4831
在使用i18n.js的时候，由于项目需求，其定义的值需要在vue.js(2)的v-for语法中使用，把它定义倒了初始化的data中。 在切换中英文的时候，发现data使用的i18n内的值并没有即时生效，而模板渲染的地方却正常。 排查是不是在这里使用的时候this.$i18n.locale并没有定义成功，一切正常； 接着查看会不会是浏览器或者项目的缓存，一切也是正常的； 又在mounted里面进行...
vue使用国际化插件i18n，如果找不到对应的语言，默认显示指定的语言
haogemr的博客
12-27 3366
在配置i18n时，增加如下配置项即可： const messages = { en: { message: 'hello world' }, ja: { // 没有翻译的本地化 `message` } } const i18n = new VueI18n({ locale: 'en', //设置语言为 ‘en’ fallbackLocale: 'en', //如果没有找到要显示的语言，则默认显示 ‘en’ silentFallbackWarn：true, //控制
linux i18n修改，中文版英文版体现
weixin_33889665的博客
02-07 91
2019独角兽企业重金招聘Python工程师标准>>> ...
vue-i18n 切换中英文
pyxllq的博客
04-02 553
1.首先使用npm安装vue-i18n 安装命令： npm install vue-i18n 2.在src/renderer目录(我的项目是如此)下创建如下目录和文件： a):创建目录src/renderer/i18n b):创建目录src/renderer/i18n/langs c):在src/renderer/i18n目录下新建文件i18n.js，内容如下： import...
利用vue-i18n实现多语言切换效果的方法
10-16
在初始化语言环境时，我们需要在VueI18n实例中设置locale属性为localStorage中获取的locale值或者默认值。然后，把该实例挂载到Vue根实例上，这样整个应用就可以利用vue-i18n的多语言功能了。 切换语言的方法可以...
使用vue 国际化i18n 实现多实现语言切换功能
10-17
en.js文件和zh.js文件分别用于存放英文和中文的翻译信息，而index.js则用于初始化vue-i18n实例。 在en.js文件中，我们导出一个对象，这个对象包含了英语环境下各个词汇的翻译： ```javascript export default { ...
vue-i18n结合Element-ui的配置方法
10-16
首先，在初始化VueI18n实例的时候，利用localStorage来保存当前的语言设置。这样即使页面刷新，也可以通过读取localStorage来恢复之前用户选择的语言，避免了语言设置丢失的问题。具体的做法是在创建VueI18n实例时，...
vue-i18n国际化
04-28
Vue-i18n是一个为Vue.js应用程序提供的国际化(i18n)解决方案，允许开发者轻松实现多语言切换。其核心功能是将文本信息与翻译后的文本关联起来，并能够根据用户选择的语言动态地显示内容。 #### 安装与版本介绍 1. ...
vue使用i18n进行多语言切换
随身笔记
09-28 1503
1.尚未安装i18n时需要安装： npm install vue-i18n 2.在项目的main.js中增加代码： import Vue from 'vue' import App from './App' import router from './router' import VueI18n from 'vue-i18n' import $ from 'jquery' Vue....
如何实现 Spring MVC i18n 国际化,动态设置默认语言
大树叶 技术专栏
07-15 1万+
1.在spring配置文件中配置资源文件properties的位置及公共名，下列配置指定的properties文件处于src目录下的 resources文件夹中，名字为message_info_*.properties。                                 resources/message_info                  
vue项目国际化 vue-i18n以及踩坑解决 小姐姐手把手教你VUE国际化~
热门推荐
Lotus的博客
06-05 2万+
1.安装配置 - 安装 $ npm install vue-i18n 或者： <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> impor...
VUE 多语言切换
℡メ㏑╭ァ小凯
08-24 857
2、Tab打开的页面多了以后，多语言切换只能切换看到的那个页面，其他页面不触发切换。解决思路：使用keep-alive 清掉路由缓存。
利用vuex配合i18n做国际化切换语言时部分数据不刷新问题
jun999
07-31 3311
vue项目中点击类似按钮切换页面语言环境： 运用的方法此处不做详细描述，思路是手动编写相关语言包，将lang配置到vuex中，切换语言是则是全部改变store中变量lang的值。 使用时遇到问题：页面中以下区域的文字未能正常转换，需要刷新页面才会按需替换： 发现：此tab的列表数据是配置在组件的data(){}中， eg： tablist:[ { name: this.$t("common-myCourses"), path: "/cr
vue-i18n 语言包维护
08-20
vue-i18n的语言包维护可以通过异步加载语言包的方式来实现。可以在Vue的实例中设置一个`i18n`对象来维护语言包。在异步加载语言包的方法`loadLanguageAsync`中，可以使用动态导入语言包模块的方式来获取语言包。然后将语言包内的字段与已有的语言包合并，并将合并后的语言包设置到`i18n`实例中。在切换语言时，可以调用`loadLanguageAsync`方法来加载相应的语言包，并将`i18n.locale`设置为对应的语言标识。最后，在Vue的原型上定义`$loadLanguageAsync`方法，以便在页面中手动切换语言时调用。在Vue组件中可以使用`$t`方法来获取对应的翻译文本。通过这种方式，可以实现vue-i18n语言包的维护。 [2 [3<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue-i18n 国际化 异步加载语言包](https://blog.csdn.net/ange2017/article/details/102818341)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值