vue 手动选择切换设置语言（详细三步）

vue项目开发过程中，有的可能需要语言的切换，Element也提供了几种方法，国际化菜单中，我们更多时候想要的是，可以自由的切换，我们基于element改进一下。

我们使用插件vue-i18n 来更好的控制

第一步： 命令行执行 npm install vue-i18n --save
安装好 vue-i18n

保险起见看 package.json里是否安装好

第二步： main.js 引用并全局注册

import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/index'
import ElementUI from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'
import VueI18n  from 'vue-i18n'Vue.use(VueI18n)
const messages = {en: {...enLocale},zh: {...zhLocale}
}
const i18n = new VueI18n({locale: 'en',messages,
})
ElementLocale.i18n((key, value) => i18n.t(key, value))Vue.use(ElementUI)
new Vue({el: '#app',store,router,components: { App },template: '<App/>'
})

问题：考虑到有可能设置完之后，用户会刷新页面，那vue重新渲染，语言会恢复初始值，我们想要的是无论跳转到哪个页面，或者刷新都保持设置过的语言。

解决方案： 1.改的地方就是 i180里locale值时候先检测本地是否设置过，设置过的话获取之前设置的语言。2.以及将i80全局注册到vue，这点很重要。

const i18n = new VueI18n({locale: localStorage.getItem('language')||'en', //这里看本地是否设置过，不存在就使用英文 enmessages,
})new Vue({el: '#app',store,router,i18n, //切记一定要在这里渲染i80components: { App },template: '<App/>'
})

第三步： 组件中设置

<template><div class='content'><el-date-pickerv-model="value1"type="date"placeholder="选择日期"></el-date-picker><el-select v-model="value" @change="languge" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</div>
</template><script>
export default {data() {return {value1:'',value:localStorage.getItem('language')||'en',//初始化时候获取上次存的值，并在处于选中状态。options: [{value: 'en',label: '英文'}, {value: 'zh',label: '中文'},]};},methods: {languge(){this.$i18n.locale = this.value  //在main.js里设置的i180我们在这里调用，并赋值localStorage.setItem('language',this.value) //每次切换语言，本地存一下，防止刷新丢失。},}
};
</script>

最终效果
初始化时候日期组件是英文

切换成中文后日期组件变成中文

并且控制台也存下了设置后的 zh 值表示中文

vue 手动选择切换设置语言（详细三步）相关推荐

优化系统参数设置——下载提速三步走
优化系统参数设置--下载提速三步走作者:冷孤月.冷月雪 ■文:重庆冷孤月网络上的不少影视资源都以BT下载的方式提供,但是不少朋友并没有体会到BT下载的高速狂奔,而更多的是听到很多新手朋友的抱怨: ...
vue xlsx 导入导出_只需三步vue实现excel文件数据提取并存为json数据
前言: 以前将excel数据导入到数据库是通过前端,将excel文件上传到后端,通过后端语言进行相应的加工将excel文件中的数据取出并存入数据库:从而实现数据库的存入流程.但是这也带来了一些问题,首 ...
Vue 服务端渲染原理拆分成三步个步骤简单的实现一个案例
前言可能我们平常接触比较多的是使用 vue + vue全家桶来搭建起一个单页(SPA)应用.用服务端渲染搭建项目比较少,本文是记录我在学习服务端渲染过程中的一些见解,如有出错或疏漏,麻烦帮忙 ...
flstudio怎么设置中文?英文切换中文语言详细操作教程
Flstudio编曲软件总共有英文和中文两种语言供用户选择,对于我们来说,更习惯于使用中文版本的flstudio编曲软件,包括我自己也比较习惯于使用中文版本的flstudio,同时也能提高工作效率.F ...
flstudio中文版下载免费flstudio怎么设置中文?英文切换中文语言详细操作教程
目录 FLStudio功能特色: FLStudio安装步骤: FL Studio 如何设置中文 FL Studio 20和21永久版下载 FLStudio是一款非常专业的后期音频处理软件,对于音乐编辑 ...
vue中使用el-table设置排名前三用金银铜的图标展示，其余排名正常展示
实现效果: 实现方式: <el-table:data="tableData":header-cell-style="{ color: 'rgba(255,255,2 ...
VScode设置语言为中文成功，菜单栏仍然显示成英文状态
我在VScode设置语言为中文成功菜单栏仍然显示成英文状态. 解决方案: 第一步:Ctrl + Shift + p 第二步:配置语言第三步: 选择中文第四步:重启重启之后就好了,没问题了.以上 ...
vue自定义组件三步走
如图所示:我自定义了两个组件,一个是Head.vue,一个是Foot.vue 我现在在Page01.vue中用他们两个,公分三步 1,引用 2,注册 3,使用
Fedora core 4下营造自己精彩桌面世界三步曲
本文转自CU:http://bbs.chinaunix.net/viewthr ... 1%26filter%3Ddigest 作者CU ID:guangdong ================== ...

vue 手动选择切换设置语言（详细三步）

vue 手动选择切换设置语言（详细三步）相关推荐

最新文章

热门文章