vue实现对语言的切换,结合vue-il8n。
1、安装vue-i18n:
npm install vue-i18n
如果npm长时间无反应,或安装失败,可以换成淘宝镜像安装:
cnpm install vue-i18n
2、在main.js中引用:
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
3、在src下新建语言文件:
src/locale/language/zh.js
src/locale/language/en.js
内容为:
4、新建一个common组件:
HTML模板:
data数据:
6、回到main.js中创建一个i18n的实例,并挂载到vue实例中
7、其实到这一步,已经基本差不多了,但是有人会问,为什么在i18n上使用了本地存储,其实这里我是为了实现点击按钮,页面不刷新、且更换语言,不然的话,我们就得手动在代码中控制语言的切换,这样做是不允许的,话不多说,直接放代码。
注:这里利用了element-ui的一些弹窗效果,所以你需先引入element-ui,还有就是这里用到了路由,记得配置一下路由哈,我们来看一下最终效果图:
如果有什么不懂的,或者大佬们有一些更好的建议以及经验的分享,欢迎在评论区留言。
vue实现对语言的切换,结合vue-il8n。的更多相关文章
- Vue实现active点击切换
Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...
- vue中的tab栏切换内容变换
<!DOCTYPE html> <html lang="cn-zh"> <head> <meta charset="UTF-8& ...
- 使用vue封装一个tab栏切换的左侧导航栏的公共组件
首先看最终效果图: 1.compent文件夹里添加tab文件夹,里面创建index.vue index.js index.css index.vue内的template部份代码如下:(最新更正:代码 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- Vue学习【第一篇】:Vue初识与指令
什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...
- 三 vue学习三 从读懂一个Vue项目开始
源码地址: https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- C++ 过滤出字符串的中文(GBK,UTF-8)
最近在处理游戏敏感词之类的东西,为了加强屏蔽处理,所以需要过滤掉字符串中的除汉字之外的是其他东西如数字,符号,英文字母等. 首先我查阅资料并写了个函数: 示例:返回输入字符串中汉字的个数: std:: ...
- web设计_5_自由的框式组件
1. CSS3 border-radius 圆角矩形框 圆角矩形框组件是页面布局中常常用到的,利用CSS3的border-radius可非常方便的创建. 并且在横向纵向上面都有很好的扩展性和灵活性. ...
- 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能
常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...
- 2019中山纪念中学夏令营-Day9[JZOJ](第六次模拟赛)
Begin (题目的排序方式:Unkown其实是按心情排的) 异或:(摘自百度百科) 异或(xor)是一个数学运算符.它应用于逻辑运算.异或的数学符号为“⊕”,计算机符号为“xor”.其运算法则为: ...
- Elasticsearch索引增量统计及定时邮件实现
0.需求 随着ELKStack在应用系统中的数据规模的急剧增长,每天千万级别数据量(存储大小:10000000*10k/1024/1024=95.37GB,假设单条数据10kB,实际远大于10KB)的 ...
- 11个rsync使用实例
rsync表示 remote sync,其用于在本地或与远程主机间进行文件或目录备份.相比较scp等工具,rsync有以下优点: 速度:除首次全拷贝外,其他时候实现增量拷贝,加快传输速度 安全:传输数 ...
- Opengl_入门学习分享和记录_番外篇00(MacOS上如何给Xcode 适配openGL)
现在前面的废话:哇这次没有鸽太久,突然想起来还没有介绍如何适配opengl的衍生库.今天一并介绍下,同样看时间允不允许,让我再把之前学到的一些东西再次总结一遍. 正文开始: 首先大家要知道我们的Ope ...
- Logback配置文件这么写,TPS提高10倍
通过阅读本篇文章将了解到 1.日志输出到文件并根据LEVEL级别将日志分类保存到不同文件 2.通过异步输出日志减少磁盘IO提高性能 3.异步输出日志的原理 配置文件logback-spring.xml ...
- win10文件备份、文件同步方案
用个人版onedrive同步重要数据,数据安全有保障,但免费版只有15G空间,需要合理分配.(201907与别人合租家庭版,空间1T充足) google-drive可以同步指定的文件夹,但空间也只有1 ...
- RDIFramework.NET敏捷开发框架通过SignalR技术整合即时通讯(IM)
1.引言 即时通讯(IM)是RDIFramework.NET敏捷开发框架全新提供的一个基于Web的即时通讯.内部聊天沟通的工具.界面美观大方对于框架内部进行消息的沟通非常方便.基于RDIFramewo ...