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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持asp之家。 

来源：https://blog.csdn.net/u011140116/article/details/107427932