vue动态添加store、路由和国际化配置方式
vue动态添加store,路由和国际化
vue动态添加store
想写组件库?用这个吧 …
// store module标准格式 import demo from '@/store/modules/demo' $store.registerModule('demo', demo)
vue动态添加路由
从后端加载路由不再是梦 …
// 不加这个可以跳转,但是options里面没有新加的信息 $router.options.routes.push(...routerArray) $router.beforeEach $router.beforeResolve $router.afterEach $router.beforeHooks // 数组 $router.afterHooks // 数组
用这些修改全局路由守卫及守卫顺序
vue动态加载国际化
从后端加载国际化,so easy …
$i18n.setLocaleMessage('zh_CN', messageObject) // or $i18n.mergeLocaleMessage('zh_CN', messageObject)
前端项目中用vue-i18n实现国际化
在项目中安装国际化包的依赖
npm i vue-i18n --save
配置文件
作为独立的i18n文件,在main.js中引入。要是国际化文件不多,建议用非异步方式引入。
异步方式引入,一次只加载一种国际化包
lang/index.js
import Vue from 'vue'; // import Cookies from 'js-cookie' import VueI18n from 'vue-i18n'; Vue.use(VueI18n); class I18n extends VueI18n { constructor() { super({ locale: '', message: {}, }); } // vue i18n init async init() { const sLang = this.getLang(); await this.setLocale(sLang); return this; } // get/update language getLang() { // get define language // 需要取cookies里面的值的话就加上 // sLang = Cookies.get('language') || navigator.language || 'zh-CN'; let sLang = navigator.language || 'zh-CN'; return sLang; } // set locale language async setLocale(sLang) { // async load language message const loadMessages = async function(sLang) { const oMessages = {}; try { // local language file const oProjectMessage = await import(`./${sLang}`); // 需要 element 里面的语言包的话就加上 // const oElementMessage = await import( // `element-ui/lib/locale/lang/${sLang}` // ); // assign language message Object.assign( oMessages, oProjectMessage.default, // oElementMessage.default, ); } catch (error) { throw new Error(error); } return oMessages; }; const oMessages = await loadMessages(sLang); // vue-i18n的方法 this.setLocaleMessage(sLang, oMessages); // update lang this.locale = sLang; } } export default new I18n();
*main.js
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import i18n from './lang/index'; //引入i8n配置 import 'normalize.css'; Vue.config.productionTip = false; // 初始化i18n和Vue i18n.init().then(async (oI18n) => { new Vue({ router, i18n: oI18n, //挂在在vue 下 render: function(h) { return h(App); }, }).$mount('#app'); });
以上异步方式适合应用在项目用默认的国际化语言,如果在页面上切语言的话,会很不方便,需要大刷。
下面推荐一下页面上有切语言的,非异步方式,一次加载所有的国际化文件。
非异步步方式,每次加载所有的包
lang/index.js
import Vue from 'vue'; // 引入Vue import VueI18n from 'vue-i18n'; // 引入i18n // import locale from 'element-ui/lib/locale' // 引入element 国际化配置 import cookie from 'js-cookie'; import cn from './zh-CN'; //简体中文语言文件 import tw from './zh-TW'; //繁体中文语言文件 import en from './en'; Vue.use(VueI18n); const locale = cookie.get('language') || navigator.language || 'zh-CN'; // 创建实例并且挂在自定义语言包 const i18n = new VueI18n({ locale: locale, // 默认语言为中文 messages: { 'zh-CN': cn, 'zh-TW': tw, en, }, silentTranslationWarn: true, }); // locale.i18n((key, value) => i18n.t(key, value)); // 把element 的语言包挂在到i18n中 export default i18n; // 导出实例
main.js
* import Vue from 'vue'; import App from './App.vue'; import router from './router'; import i18n from './lang/index'; //引入i8n配置 import 'normalize.css'; // import common plugins import utils from './utils'; Vue.config.productionTip = false; // install utils Vue.use(utils); new Vue({ router, i18n, // 挂在在vue 下 render: function(h) { return h(App); }, }).$mount('#app'); /* 路由发生变化修改页面title */ router.beforeEach((to, from, next) => { if (to.name) { document.title = `${i18n.t('title')}-${i18n.t(to.name)}`; } next(); });
lang/zh-CN.js
export default { title: '梦醒在笑-标题', edit: '修改', }
lang/cn.js
export default { title: 'title', edit: 'edit', }
lang/zh-TW.js
export default { title: '繁體﹣標題', edit: '編輯', }
使用
在HTML中使用
<div>{{ $i18n.t('title')}}</div>
在JS中使用
this.$i18n.t('title')
切语言
非异步方式切换完页面不用刷新。
//在页面上这样调用 changeLang('zh-TW')changeLang('zh-CN')changeLang('en') changeLang(lang) { //切换语言 this.lang = lang; this.$i18n.locale = lang; this.$utils.cookie.set('language', lang); },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/u011140116/article/details/107427932
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16