vue動態(tài)添加store、路由和國際化配置方式
vue動態(tài)添加store,路由和國際化
vue動態(tài)添加store
想寫組件庫?用這個吧 …
// store module標(biāo)準(zhǔn)格式 import demo from '@/store/modules/demo' $store.registerModule('demo', demo)
vue動態(tài)添加路由
從后端加載路由不再是夢 …
// 不加這個可以跳轉(zhuǎn),但是options里面沒有新加的信息 $router.options.routes.push(...routerArray) $router.beforeEach $router.beforeResolve $router.afterEach $router.beforeHooks ?// 數(shù)組 $router.afterHooks ?// 數(shù)組
用這些修改全局路由守衛(wèi)及守衛(wèi)順序
vue動態(tài)加載國際化
從后端加載國際化,so easy …
$i18n.setLocaleMessage('zh_CN', messageObject) // or $i18n.mergeLocaleMessage('zh_CN', messageObject)
前端項(xiàng)目用vue-i18n實(shí)現(xiàn)國際化
在項(xiàng)目中安裝國際化包的依賴
npm i vue-i18n --save
配置文件
作為獨(dú)立的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'); });
以上異步方式適合應(yīng)用在項(xiàng)目用默認(rèn)的國際化語言,如果在頁面上切語言的話,會很不方便,需要大刷。
下面推薦一下頁面上有切語言的,非異步方式,一次加載所有的國際化文件。
非異步步方式,每次加載所有的包
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'; // 創(chuàng)建實(shí)例并且掛在自定義語言包 const i18n = new VueI18n({ locale: locale, // 默認(rèn)語言為中文 messages: { 'zh-CN': cn, 'zh-TW': tw, en, }, silentTranslationWarn: true, }); // locale.i18n((key, value) => i18n.t(key, value)); // 把element 的語言包掛在到i18n中 export default i18n; // 導(dǎo)出實(shí)例
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'); /* 路由發(fā)生變化修改頁面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: '夢醒在笑-標(biāo)題', ? ? edit: '修改', ? ? }
lang/cn.js
?export default { ? ? title: 'title', ? ? edit: 'edit', ? ? }
lang/zh-TW.js
?export default { ? ? title: '繁體﹣標(biāo)題', ? ? edit: '編輯', ? ? }
使用
在HTML中使用
?<div>{{ $i18n.t('title')}}</div>
在JS中使用
this.$i18n.t('title')
切語言
非異步方式切換完頁面不用刷新。
//在頁面上這樣調(diào)用 changeLang('zh-TW')changeLang('zh-CN')changeLang('en') changeLang(lang) { ? ?//切換語言 ? ?this.lang = lang; ? ?this.$i18n.locale = lang; ? ?this.$utils.cookie.set('language', lang); },
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
- vue實(shí)現(xiàn)動態(tài)路由詳細(xì)
- vue-admin-template?動態(tài)路由的實(shí)現(xiàn)示例
- 如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動態(tài)路由和動態(tài)側(cè)邊菜單欄
- vue如何根據(jù)權(quán)限生成動態(tài)路由、導(dǎo)航欄
- vue后臺管理如何配置動態(tài)路由菜單
- vueRouter--matcher之動態(tài)增減路由方式
- vue項(xiàng)目keepAlive配合vuex動態(tài)設(shè)置路由緩存方式
- vue?router?動態(tài)路由清除方式
- vue3動態(tài)添加路由
相關(guān)文章
Vue快速實(shí)現(xiàn)通用表單驗(yàn)證的方法
這篇文章主要介紹了Vue快速實(shí)現(xiàn)通用表單驗(yàn)證的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05Vue使用konva實(shí)現(xiàn)一個簡便的流程圖
日常開發(fā)中我們可能碰到流程圖的需求,實(shí)現(xiàn)流程圖的庫有很多,如果我們想要實(shí)現(xiàn)一個簡便的流程圖可以使用konva庫來實(shí)現(xiàn),下面我們就來看一下具體的實(shí)現(xiàn)過程,需要的朋友可以參考下2023-08-08vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換
本文主要介紹了vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01vue項(xiàng)目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決
這篇文章主要介紹了vue項(xiàng)目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue 父組件給子組件傳值子組件給父組件傳值的實(shí)例代碼
這篇文章主要介紹了vue 父組件給子組件傳值,子組件給父組件傳值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04