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({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- js里的window对象
alert(<msg>) 向用户显示对话框窗口并等候其被关闭 blur() 让窗口失去键盘焦 ...
- IIS网站服务器性能优化攻略
Windows Server自带的互联网信息服务器(Internet Information Server,IIS)是架设网站服务器的常用工具,它是一个既简单而又麻烦的东西,新手都可以使用IIS架设一 ...
- Cordova-iOS SDK封装
源码编译与制作静态库 下载cordova-ios源码,下载地址为:cordova-ios 解压后使用Xcode进行编译,编译选定模拟器和Generic iOS Device,cmd+B,编译成功(Dy ...
- 你可能不知道的Docker资源限制
What is 资源限制? 默认情况下,容器是没有资源限制的,它会尽可能地使用宿主机能够分配给它的资源.Docker提供了一种控制分配多少量的内存.CPU或阻塞I/O给一个容器的方式,即通过在dock ...
- 语音控制单片机工作【百度语音识别,串口发送数据到单片机】【pyqt源码+软件】!!
前些天闲着没事,就做了个语音识别结合串口发送指令的软件,用的是pyqt写的,软件打开后对着笔记本的话筒说话, 他就能识别返回文字结果,然后匹配语音中的关键词,如果有关键词就发送关键词对应的命令,比如语 ...
- [NUnit]No results
Results (nunit3) saved as TestResult.xmlCommitting...No results, this could be for a number of reaso ...
- Chrome 开发工具之 Memory
开发过程中难免会遇到内存问题,emmm... 本文主要记录一下Chrome排查内存问题的面板,官网也有,但有些说明和例子跟不上新的版本了,也不够详细... !!! 多图预警!!! 简单的内存 ...
- Spider & CrawlSpider
CrawlSpide 最重要的是分析源码官方文档百度收搜 Spider document 就是官方文档了1.3的源码分析CrawlSpide 是爬取一个网站常用的规则 它是对spider进一步的包装 ...
- java高并发系列 - 第25天:掌握JUC中的阻塞队列
这是java高并发系列第25篇文章. 环境:jdk1.8. 本文内容 掌握Queue.BlockingQueue接口中常用的方法 介绍6中阻塞队列,及相关场景示例 重点掌握4种常用的阻塞队列 Queu ...
- 洛谷 P1120 小木棍
题意简述 给出n个数,求最小的l,使n个数可分成若干组,每组和都为l. 题解思路 暴力搜索+剪枝 代码 #include <cstdio> #include <cstdlib> ...