欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue動態(tài)添加store、路由和國際化配置方式

 更新時間:2022年03月30日 15:54:26   作者:周曉風(fēng)  
這篇文章主要介紹了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),希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關(guān)文章

  • Vue的Options用法說明

    Vue的Options用法說明

    這篇文章主要介紹了Vue的Options用法說明,具有很好的參考價值,希望對大家有所
    2020-08-08
  • Vue快速實(shí)現(xiàn)通用表單驗(yàn)證的方法

    Vue快速實(shí)現(xiàn)通用表單驗(yàn)證的方法

    這篇文章主要介紹了Vue快速實(shí)現(xiàn)通用表單驗(yàn)證的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • vue如何隨心所欲調(diào)整el-dialog中body的樣式

    vue如何隨心所欲調(diào)整el-dialog中body的樣式

    這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue使用konva實(shí)現(xiàn)一個簡便的流程圖

    Vue使用konva實(shí)現(xiàn)一個簡便的流程圖

    日常開發(fā)中我們可能碰到流程圖的需求,實(shí)現(xiàn)流程圖的庫有很多,如果我們想要實(shí)現(xiàn)一個簡便的流程圖可以使用konva庫來實(shí)現(xiàn),下面我們就來看一下具體的實(shí)現(xiàn)過程,需要的朋友可以參考下
    2023-08-08
  • vue中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)切換

    本文主要介紹了vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-12-12
  • vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案

    vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案

    這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • vue項(xiàng)目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決

    vue項(xiàng)目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決

    這篇文章主要介紹了vue項(xiàng)目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • 使用vue3+ts打開echarts的正確方式

    使用vue3+ts打開echarts的正確方式

    這篇文章主要給大家介紹了關(guān)于使用vue3+ts打開echarts的正確方式,在Vue3中使用ECharts組件可以方便地創(chuàng)建各種數(shù)據(jù)可視化圖表,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • vue 父組件給子組件傳值子組件給父組件傳值的實(shí)例代碼

    vue 父組件給子組件傳值子組件給父組件傳值的實(shí)例代碼

    這篇文章主要介紹了vue 父組件給子組件傳值,子組件給父組件傳值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • 用vue快速開發(fā)app的腳手架工具

    用vue快速開發(fā)app的腳手架工具

    這篇文章主要介紹了用vue快速開發(fā)app的腳手架工具,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06

最新評論