乘风原创程序

  • vue动态添加store、路由和国际化配置方式
  • 2022/3/30 16:09:07
  • vue动态添加store,路由和国际化

    vue动态添加store

    想写组件库?用这个吧 …

    // store module标准格式
    import demo from '@/store/modules/demo'
    $store.registermodule('demo', demo)

    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 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');
    });
    

    以上异步方式适合应用在项目用默认的国际化语言,如果在页面上切语言的话,会很不方便,需要大刷。

    下面推荐一下页面上有切语言的,非异步方式,一次加载所有的国际化文件。

    非异步步方式,每次加载所有的包

    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';
    // 创建实例并且挂在自定义语言包
    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 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');
    /* 路由发生变化修改页面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中使用

    ?<div>{{ $i18n.t('title')}}</div>

    在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);
    },

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