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

目录

  • vue动态添加store,路由和国际化
    • vue动态添加store
    • vue动态添加路由
    • vue动态加载国际化
  • 前端项目用vue-i18n实现国际化
    • 在项目中安装国际化包的依赖
    • 配置文件
      • 异步方式引入,一次只加载一种国际化包
      • 非异步步方式,每次加载所有的包
    • 使用
      • 切语言

      vue动态添加store,路由和国际化
      vue动态添加store
      想写组件库?用这个吧 …
      // store module标准格式import demo from '@/store/modules/demo'$store.registerModule('demo', demo)

      【vue动态添加store、路由和国际化配置方式】
      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 initasync init() {const sLang = this.getLang(); await this.setLocale(sLang); return this; }// get/update languagegetLang() {// get define language// 需要取cookies里面的值的话就加上// sLang = Cookies.get('language') || navigator.language || 'zh-CN'; let sLang = navigator.language || 'zh-CN'; return sLang; }// set locale languageasync setLocale(sLang) {// async load language messageconst loadMessages = async function(sLang) {const oMessages = {}; try {// local language fileconst oProjectMessage = await import(`./${sLang}`); // 需要 element 里面的语言包的话就加上// const oElementMessage = await import(//`element-ui/lib/locale/lang/${sLang}`// ); // assign language messageObject.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 langthis.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); },

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

        推荐阅读