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({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- JSP一二章笔试题
一. 什么是B/S架构,什么是C/S架构B/S(Browser/Server) 浏览器/服务器 C/S(Client/Server) 客户端/服务器 二. B/S架构的工作原理 浏览器请求服务器 通过 ...
- spring解析配置文件(三)
一.从XmlBeanDefinitionReader的registerBeanDefinitions(doc,resource)开始 protected int doLoadBeanDefinitio ...
- Waiting for 1 instance(s) to be deallocated
看是不是马虎,自己的xampp,也就是mysql有没有打开
- DesignPattern系列__02接口隔离原则
介绍 客户端不应该依赖它不需要的接口,即一个类对另一个类的依赖应该建立在最小接口上. Demo引入 先来看一张图: interface MyInterface { void operation1(); ...
- 3. 源码分析---SOFARPC客户端服务调用
我们首先看看BoltClientProxyInvoker的关系图 所以当我们用BoltClientProxyInvoker#invoke的时候实际上是调用了父类的invoke方法 ClientProx ...
- dubbo是如何控制并发数和限流的?
ExecuteLimitFilter ExecuteLimitFilter ,在服务提供者,通过 的 "executes" 统一配置项开启: 表示每服务的每方法最大可并行执行请求数 ...
- 算法与数据结构基础 - 链表(Linked List)
链表基础 链表(Linked List)相比数组(Array),物理存储上非连续.不支持O(1)时间按索引存取:但链表也有其优点,灵活的内存管理.允许在链表任意位置上插入和删除节点.单向链表结构一般如 ...
- css实现左边高度自适应右边高度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- (16)ASP.NET Core 通用主机(HostBuilder)
1.前言 ASP.NET Core应用程序可以配置和启动主机(Host).主机负责应用程序启动和生命周期管理.通用主机用于无法处理HTTP请求的应用程序.通用主机的用途是将HTTP管道从Web主机AP ...
- 为什么说java是只有值传递?
如果你学的第一门程序语言是java可能对这个传递方式没有那么敏感,如果学了c或c++,然后再学java,那么可能对这个问题会感到困惑. 1.值传递与引用传递的概念 在将传递方式之前先理解一下形参与实参 ...