Vue 使用i8n, 中英文页面版本切换

vue-i18n 多语言版本处理

1. 安装vue-i18n

npm install vue-i18n

2.在main.js中引入并使用

 import  VueI18n from 'vue-i18n'Vue.use(VueI18n)const  i18n = new VueI18n({locale: 'zh',          //默认语言message: {'zh': require('./lang/zh'),'en': require('./lang/en')}})

3.创建语言文件夹

我是在main.js的同级目录下新建了一个lang目录，并在下面新建了zh.js和en.js

zh.js内容如下

module.exports = {language:'中文'，nav:{home: '首页'，company:' 公司'}
}

en.js内容如下

module.exports = {language:'english'，nav:{home: 'Home'，company:' Company'}
}

4.在html中使用i18n
在html中使用

<nav> {{ $t('nav.home') }}  </nav>

在js中使用

data(){return {home:this.$t('nav.home')}
}

至此，语言切换已基本实现。
下面是使用localStorage存储变更语言到浏览器，方便下次浏览时，采用用户上次选择的语言来展示页面

5.以下是使用cookie记录用户浏览页面时使用的语言习惯
5.1 安装js-cookie

npm  install js-cookie

5.2 存取cookie信息

我是在lang下新建一个lang.js, 用于存取语言信息

lang.js如下

export default {setLang(lang){window.localStorage.setItem('user_lang',lang)},getLang(defaultLang)let  localLang = window.localStorage.getItem('user_lang')if( localLang === null  ){defaultLang = defaultLang || 'en'          //如果没有传入参数，则默认enreturn defaultLang}else{return  localLang}
}

5.3 执行set
在components中先import

import LangStorage from '../lang/lang'

然后在函数中调用set

changeLang(lang){langStorage.setLang(lang)         //存储语言this.$router.go(0)                      //重新加载页面
}

5.4 调用get, 设置初始值
在main.js修改初始值设置
第一步，引入lang

import LangStorage from '../lang/lang'

第二步，修改locale,设置初始值为用户上次浏览时所用的语言版本

 const  i18n = new VueI18n({locale: LangStorage.getItem('en'),          //默认语言修改如下message: {'zh': require('./lang/zh'),'en': require('./lang/en')}})

*在components中想获取语言信息时，可直接引入lang.js,再执行其getItem方法，也可以直接将i18n挂载到vue实例上，即在main.js的new Vue（{ }）中添加设置 i18n，随后在components中，调用this.$i18n.locale获取语言信息。

[参考链接] (https://www.jianshu.com/p/cc4253745b0f)
感谢指导

Vue 使用i8n, 中英文页面版本切换相关推荐

vue 开发环境卸载node 版本切换新的 node 版本 mac电脑
注意:操作的机器当前是mac,先卸载,再安装 1.查看现有 node 版本 node -v 2.卸载现有 node 版本, 1.卸载从node官网下载pkg安装的node sudo rm -rf /u ...
自动判断浏览器的中英文版本自动跳转网站中英文页面代码
许多网站现在都是依靠自动判断浏览器的中英文版本来判断给你打开网站的中文还是英文版,也许好多朋友还不知道这个代码,今天正好给公司改版企业网站用到了,在此公布出来,供大家一起学习. HTML网页根据来访者 ...
vue切换菜单时不需要页面刷新_antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作...
废话不说,上代码! nav 1 nav 2 nav 3 重点: 1,selectedkeys要设置成$route.path地址 2,a-menu-item 的key设置成要去的地址刷新页面,成功! ...
[连载]《C#通讯（串口和网络）框架的设计与实现》- 13.中英文版本切换设计
目录第十三章中英文版本切换设计... 2 13.1 不用自带的资源文件的理由... 2 13.2 配置文件... 2 13.3 语言 ...
vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换
引用地址:vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换 - 长空雁叫霜晨月 - 博客园项目预览地址:https://volodya-01.github.io/vue2.0_t ...
Adobe Audition CC 2017 中英文版本切换的批处理
一个朋友的工作室使用Adobe Audition CC 2017做音频节目.使用者有的习惯用英文版,有的喜欢用中文版,希望我帮助.开始我都不知道Adobe Audition CC是个什么东东,百度了一 ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
vue mxgraph渲染xml页面_Vue的两个版本
Vue.js分为两个版本,简单来说就是一个是完整版vue.js,一个是非完整版vue.runtime.js: 1. HTML的书写位置不同完整版: 完整版的HTML书写的位置有两个,一个是直接在 * ...
html meta 跳转白屏,vue使用keepAlive之后页面空白白屏？route和router什么区别呢？...
问题描述: vue使用keepAlive之后页面空白,报错:TypeError: Cannot read property 'keepAlive' of undefined... 为了实现页面跳转之后 ...

Vue 使用i8n, 中英文页面版本切换

Vue 使用i8n, 中英文页面版本切换相关推荐

最新文章

热门文章