vue動(dòng)態(tài)添加store、路由和國際化配置方式
vue動(dòng)態(tài)添加store,路由和國際化
vue動(dòng)態(tài)添加store
想寫組件庫?用這個(gè)吧 …
// store module標(biāo)準(zhǔn)格式
import demo from '@/store/modules/demo'
$store.registerModule('demo', demo)vue動(dòng)態(tài)添加路由
從后端加載路由不再是夢 …
// 不加這個(gè)可以跳轉(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動(dòng)態(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)的國際化語言,如果在頁面上切語言的話,會(huì)很不方便,需要大刷。
下面推薦一下頁面上有切語言的,非異步方式,一次加載所有的國際化文件。
非異步步方式,每次加載所有的包
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);
},以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue實(shí)現(xiàn)動(dòng)態(tài)路由詳細(xì)
- vue-admin-template?動(dòng)態(tài)路由的實(shí)現(xiàn)示例
- 如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄
- vue如何根據(jù)權(quán)限生成動(dòng)態(tài)路由、導(dǎo)航欄
- vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單
- vueRouter--matcher之動(dòng)態(tài)增減路由方式
- vue項(xiàng)目keepAlive配合vuex動(dòng)態(tài)設(shè)置路由緩存方式
- vue?router?動(dòng)態(tài)路由清除方式
- vue3動(dòng)態(tài)添加路由
相關(guān)文章
vue-element-admin登錄攔截設(shè)置白名單方式
這篇文章主要介紹了vue-element-admin登錄攔截設(shè)置白名單方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用eventBus遇到數(shù)據(jù)不更新的問題及解決
這篇文章主要介紹了vue使用eventBus遇到數(shù)據(jù)不更新的問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
jeecgboot-vue3查詢區(qū)label文字居左實(shí)現(xiàn)過程解析
這篇文章主要為大家介紹了jeecgboot-vue3查詢區(qū)label文字居左實(shí)現(xiàn)過程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-08-08
vue三元運(yùn)算之多重條件判斷方式(多個(gè)枚舉值轉(zhuǎn)譯)
這篇文章主要介紹了vue三元運(yùn)算之多重條件判斷方式(多個(gè)枚舉值轉(zhuǎn)譯),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
Flutter部件內(nèi)部狀態(tài)管理小結(jié)之實(shí)現(xiàn)Vue的v-model功能
本文是 Flutter 部件內(nèi)部狀態(tài)管理的小結(jié),從部件的基礎(chǔ)開始,到部件的狀態(tài)管理,并且在過程中實(shí)現(xiàn)一個(gè)類似 Vue 的 v-model 的功能,感興趣的朋友跟隨小編一起看看吧2019-06-06
如何解決npm i下載依賴的時(shí)候出現(xiàn)某依賴版本沖突
這篇文章主要介紹了如何解決npm i 下載依賴的時(shí)候出現(xiàn)某依賴版本沖突問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue從后臺(tái)渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情詳解
這篇文章主要給大家介紹了關(guān)于vue從后臺(tái)渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12

