vue 使用vue-i18n做全局中英文切换
1、vue-i18n安装
npm install vue-i18n --save-dev
2、在main.js文件中引入
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: localStorage.getItem('language')||'zh', //使用localStorage缓存到本地,当下次使用时可默认当前使用语言
messages: {
' zh': require('./common/lang/zh'),
'en': require('./common/lang/en')
}
})
new Vue({
el: '#app',
router,
i18n,
template: '<App/>',
components: { App }
})
3、新建中英文语言文件
zh.js:
module.exports = {
language: {
name: 'English'
},
navbar: {
home: '首页',
}
}
en.js:
module.exports = {
language: {
name: '中文'
},
navbar: {
home: 'Home',
}
}
4、创建一个切换语言方法(写在App.vue可以全局控制);
changeLang() {
let locale = localStorage.getItem('language')||'zh';
let temp=locale === 'zh' ? 'en' : 'zh';
this.$i18n.locale=temp;//改变当前语言
localStorage.language=temp;
}
5、在template中的使用:
<p>{{ $t('language.name') }}</p>
<p>{{ $t('navbar.contact') }}</p>
vue 使用vue-i18n做全局中英文切换的更多相关文章
- VueJS 使用i18n做国际化切换中英文
1.安装 npm install vue-i18n --save 2.创建存放语言包和i18n入口文件 a.在src下创建i18n目录 b.在src/i18n/创建i18n.js (入口) c.在s ...
- 【vue】中英文切换(使用 vue-i18n )
一.准备工作 1.vue-i18n 1.仓库地址 2.兼容性:支持 Vue.js 2.x 以上版本 1-1.安装依赖vue-i18n (c)npm install vue-i18n 1-2.使用 在 ...
- vue环境搭建及单页面标签切换实例
复习 """ 1.指令: v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show:绑定的 ...
- 如何通过 Vue+Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
- vue 项目的I18n国际化之路
I18n (internationalization ) ---未完善 产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点:1. 语言语言本地 ...
- vue国际化问题i18n为null
1.vue的国际化关于使用请看这位大佬的文章https://segmentfault.com/a/1190000015008808 2.this指向问题https://segmentfault.com ...
- Vue.use自定义自己的全局组件
通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-sim ...
- vue通过extend动态创建全局组件(插件)学习小记
测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...
- vue用mand-mobile ui做交易所移动版实战示例
vue用mand-mobile ui做交易所移动版实战示例 先展示几个界面: 目录结构: main.js // The Vue build version to load with the `impo ...
随机推荐
- Ubuntu 16.04 + github page + hexo 搭建博客
1. 安装nodejs: sudo apt-get install nodejs-legacy 2.安装nvm : wget -qO- https://raw.github.com/creatio ...
- 8-15 globalCompositeOperation阶段练习二
8-15 globalCompositeOperation阶段练习二 <!DOCTYPE html> <html lang="zh-cn"> <hea ...
- C#数字、16进制字符串和字节之间互转
转自http://luohonghong.blog.163.com/blog/static/78312058201242632055642/ 如下: .数字和字节之间互转 ; byte[] bytes ...
- 如何装载Storyboard中的ViewController?
如上图所示,如何装载Storyboard中指定的ViewController? 首先,需要指定ViewController的ID,如上图右上方红色方框内的Storyboard ID.然后使用下面的 ...
- Java 泛型 四 基本用法与类型擦除
简介 Java 在 1.5 引入了泛型机制,泛型本质是参数化类型,也就是说变量的类型是一个参数,在使用时再指定为具体类型.泛型可以用于类.接口.方法,通过使用泛型可以使代码更简单.安全.然而 Java ...
- swift中使用GCDMulticastDelegate
在开源库XMPPFramework中提供了一个GCDMulticastDelegate类,使用它可以为一个对象添加多个被委托的对象,以前用oc编写的工程引入了这个类,使用起来十分方便.最近由于换了工作 ...
- IDEA中Spark读Hbase中的数据
import org.apache.hadoop.hbase.HBaseConfiguration import org.apache.hadoop.hbase.io.ImmutableBytesWr ...
- sshfs把远程主机的文件系统映射到本地的目录中(转载)
转自:http://www.fwolf.com/blog/post/329 windows之外的世界比想像中要大得多呢,几乎天天都在用ssh,却到今天才知道有sshfs这个好东西,前几天还在为Zend ...
- 0623-TP框架整理一(下载、入口文件、路由、创建控制器、调用模板、系统常量、命名空间)
一.下载解压后用ThinkPHP(核心)文件 核心文件夹(ThinkPHP)不要改,是作用于全局的,有需要可以改应用目录(Application) 二.创建入口文件: 运行后出现欢迎界面,在说明系统自 ...
- [Swift通天遁地]一、超级工具-(18)创建强大、灵活的日期时间拾取器
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...