vue如何动态添加store、路由和国际化配置方式

这篇文章主要为大家展示了"vue如何动态添加store、路由和国际化配置方式"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"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和Vuei18n.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'; // 引入Vueimport 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 pluginsimport utils from './utils';Vue.config.productionTip = false;// install utilsVue.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中使用

 
{{ $i18n.t('title')}}

在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);},

以上是"vue如何动态添加store、路由和国际化配置方式"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！