Shulou(Shulou.com)06/01 Report--

This article mainly shows you "vue how to dynamically add store, routing and internationalization configuration", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to dynamically add store, routing and internationalization configuration" this article.

Vue dynamically add store, routing and internationalization vue dynamically add store

Want to write a component library? Use this...

/ / store module standard format import demo from'@ / store/modules/demo'$store.registerModule ('demo', demo) vue dynamically add routes

Loading routes from the backend is no longer a dream.

/ / you can jump without this, but there is no new information in options $router.options.routes.push (. RouterArray) $router.beforeEach$router.beforeResolve$router.afterEach$router.beforeHooks / / array $router.afterHooks / / array

Use these to modify the global routing guard and guard order

Vue dynamic loading internationalization

Load internationalization from the backend, so easy...

$i18n.setLocaleMessage ('zh_CN', messageObject) / / or$i18n.mergeLocaleMessage (' zh_CN', messageObject) front-end project implements internationalization with vue-i18n npm I vue-i18n-- save configuration file that installs internationalization packages in the project

As a separate i18n file, it is introduced in main.js. If there are not many international files, it is recommended to introduce them in a non-asynchronous way.

Introduced asynchronously, loading only one internationalization package at a time

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 / / if you need to take the value in cookies, add / / 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}`) / / if you need the language pack in element, add / / 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); / / method of 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'; / / introduce i8n configuration import 'normalize.css';Vue.config.productionTip = false / / initialize i18n and Vuei18n.init () .then (async (oI18n) = > {new Vue ({router, i18n: oI18n, / / hang under vue render: function (h) {return h (App);},}). $mount ('# app');})

The above asynchronous method is suitable for the project to use the default international language, if you cut the language on the page, it will be very inconvenient and need to be brushed.

The following recommendation is to load all the internationalized files at once in a language-cutting, non-asynchronous way on the page.

Non-asynchronous mode, loading all packages at a time

Lang/index.js

Import Vue from 'vue'; / / introduce Vueimport VueI18n from' vue-i18n'; / / introduce i18n// import locale from 'element-ui/lib/locale' / / introduce element internationalization configuration import cookie from' js-cookie';import cn from'. / zh-CN'; / / simplified Chinese language file import tw from'. / zh-TW'; / / traditional Chinese language file import en from'. / en';Vue.use (VueI18n) Const locale = cookie.get ('language') | | navigator.language | |' zh-CN';// creates an instance and hangs it in the custom language package const i18n = new VueI18n ({locale: locale, / / default language is Chinese messages: {'zh-CN': cn,' zh-TW': tw, en,}, silentTranslationWarn: true,}) / / locale.i18n ((key, value) = > i18n.t (key, value)); / / hang the language package of element in i18n export default i18n; / / Export the instance

Main.js

* import Vue from 'vue';import App from'. / App.vue';import router from'. / router';import i18n from'. / lang/index'; / / introduce i8n configuration import 'normalize.css';// import common pluginsimport utils from'. / utils';Vue.config.productionTip = false;// install utilsVue.use (utils); new Vue ({router, i18n, / / hang under vue render: function (h) {return h (App)) },}). $mount ('# app'); / * Route change page 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: 'awake smiling-title', edit: 'modify',}

Lang/cn.js

Export default {title: 'title', edit:' edit',}

Lang/zh-TW.js

Export default {title: 'traditional-title', edit: 'edit',} use

Use in HTML

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

Use in JS

This.$i18n.t ('title') cut language

There is no need to refresh the page after switching in a non-asynchronous way.

/ / call changeLang ('zh-TW') changeLang (' zh-CN') changeLang ('en') changeLang (lang) {/ / switch language this.lang = lang; this.$i18n.locale = lang; this.$utils.cookie.set (' language', lang) on the page like this.}, this is all the content of the article "how to dynamically add store, routing and internationalization configuration in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.