vue动态添加store、路由和国际化配置方式

 更新时间:2022年03月30日 15:54:26   作者:周晓风  
这篇文章主要介绍了vue动态添加store、路由和国际化配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

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

相关文章

  • 浅谈vue中所有的封装方式总结

    浅谈vue中所有的封装方式总结

    因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目,那么应该如何封装,本文就介绍一下如何封装,感兴趣的可以了解一下
    2021-07-07
  • vue 自定义指令directives及其常用钩子函数说明

    vue 自定义指令directives及其常用钩子函数说明

    这篇文章主要介绍了vue 自定义指令directives及其常用钩子函数说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • 基于node+vue实现简单的WebSocket聊天功能

    基于node+vue实现简单的WebSocket聊天功能

    最近学习了一下websocket的即时通信,感觉非常的强大,这里我用node启动了一个服务进行websocket链接,然后再vue的view里面进行了链接,进行通信,废话不多说,直接上代码吧
    2020-02-02
  • Vue ElementUI table实现双击修改编辑某个内容的方法

    Vue ElementUI table实现双击修改编辑某个内容的方法

    在实现表格单元格双击编辑功能时,需使用@cell-dblclick事件来触发双击操作,将单元格切换为input输入框,通过ref引用和绑定失焦及回车事件来确认编辑,同时,需要处理编辑数据的更新和方法逻辑的完善
    2024-09-09
  • 解决Vue 通过下表修改数组,页面不渲染的问题

    解决Vue 通过下表修改数组,页面不渲染的问题

    下面小编就为大家分享一篇解决Vue 通过下表修改数组,页面不渲染的问题。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue循环中调用接口-promise.all();按顺序执行异步处理方式

    vue循环中调用接口-promise.all();按顺序执行异步处理方式

    这篇文章主要介绍了vue循环中调用接口-promise.all();按顺序执行异步处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue3-print-nb实现页面打印(含分页打印)示例代码

    vue3-print-nb实现页面打印(含分页打印)示例代码

    大多数后台系统中都存在打印的需求,在有打印需求时,对前端来说当然是直接打印页面更容易,下面这篇文章主要给大家介绍了关于vue3-print-nb实现页面打印(含分页打印)的相关资料,需要的朋友可以参考下
    2024-01-01
  • vue slots 组件的组合/分发实例

    vue slots 组件的组合/分发实例

    今天小编就为大家分享一篇vue slots 组件的组合/分发实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue实现检测敏感词过滤组件的多种思路

    vue实现检测敏感词过滤组件的多种思路

    这篇文章主要介绍了vue编写检测敏感词汇组件的多种思路,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • Vue+Canvas绘图使用的讲解

    Vue+Canvas绘图使用的讲解

    这篇文章主要介绍了Vue+Canvas绘图的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论