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({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- Linu基础之权限管理
二十二.权限管理 22.1)什么是权限 针对某些文件或者进程,对用户进行限制,权限可以理解为用于约束用户能对系统所做的操作. 22.2)权限和用户的关系 [root@centos7 ~]# ll ...
- Java中Random随机数
java中一般有两种随机数,一个是Math中random()方法,一个是Random类. 一.Math.random() 随即生成0<=x<1的小数. 实例:如何写,生成随机生成出0~10 ...
- 滚动视图、列表视图[ListView、SimpleAdapter类]
滚动视图 <ScrollView android: layout_width="fill_parent" android: layout_height="fill_ ...
- Anaconda大法好,为什么要用Anaconda(附linux安装与用例)
距离写上一个博客已经过去很久了,注册的时候我还是个大三学生抱着windows系统的visual studio在OPENCV等等复杂组件下面瑟瑟发抖,一不小心就担心hpp找不到了,依赖库没了,或者安装了 ...
- Linux系统命令。
help:命令用于显示shell内部命令的帮助信息.help命令只能显示shell内部的命令 帮助信息.而对于外部命令的帮助信息只能使用man或者info命令查看 m ...
- Kubernetes容器集群管理环境 - Prometheus监控篇
一.Prometheus介绍之前已经详细介绍了Kubernetes集群部署篇,今天这里重点说下Kubernetes监控方案-Prometheus+Grafana.Prometheus(普罗米修斯)是一 ...
- Java Lambda表达式forEach无法跳出循环的解决思路
Java Lambda表达式forEach无法跳出循环的解决思路 如果你使用过forEach方法来遍历集合,你会发现在lambda表达式中的return并不会终止循环,这是由于lambda的底层实现导 ...
- 如何思考博弈dp
两个人的规则是否一致 若仅仅是先后的差别 我们可用dp解决一般思考一个子状态 对于当前的那个状态 我们进行什么样的操作 已知什么
- 直方图均衡基本原理及Python实现
1. 基本原理 通过一个变换,将输入图像的灰度级转换为`均匀分布`,变换后的灰度级的概率密度函数为 $$P_s(s) = \frac{1}{L-1}$$ 直方图均衡的变换为 $$s = T(r) = ...
- Linux学习之自动配置部署——初用expect
主机A连接主机B 免密登陆 + 自动部署 expect实现自动的交互式任务 ——— send 向进程发送字符串(输入) ——— expect 从进程接受字符串 ——— spawn 启动新进程 ——— ...