vuex的store模式,
这篇文章主要介绍了某视频剪辑软件动态添加商店，路由和国际化配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue动态添加店，路由和国际化某视频剪辑软件动态添加storevue动态添加路由某视频剪辑软件动态加载国际化前端项目用vue-i18n实现国际化在项目中安装国际化包的依赖配置文件异步方式引入，一次只加载一种国际化包非异步步方式，每次加载所有的包使用切语言
vue动态添加store,路由和国际化
vue动态添加store
想写组件库？用这个吧…
//存储模块标准格式
从" @/商店/模块/演示"导入演示
$store.registerModule(demo ，demo)
vue动态添加路由
从后端加载路由不再是梦…
//不加这个可以跳转，但是选择里面没有新加的信息
$router.options.routes.push(.路由器阵列)
$router.beforeEach
$router.beforeResolve
$router.afterEach
$router.beforeHooks //数组
$router.afterHooks //数组
用这些修改全局路由守卫及守卫顺序
vue动态加载国际化
从后端加载国际化，如此简单…
$i18n.setLocaleMessage(zh_CN ，messageObject)
//或者
i18n美元。mergeloclocalemessage( zh _ CN ，messageObject)
前端项目用vue-i18n实现国际化
在项目中安装国际化包的依赖
npm i vue-i18n -保存
配置文件
作为独立的i18n文件，在主页。射流研究…中引入。要是国际化文件不多，建议用非异步方式引入。
异步方式引入，一次只加载一种国际化包
lang/index.js
从“Vue”导入Vue
//从" js-cookie "导入甜饼干
从" vue-i18n "导入VueI18n
vue。使用(vue i18n)；
I18n类扩展了VueI18n {
构造函数(){
超级({
区域设置： ,
消息：{},
});
}
//vue i18n初始化
异步初始化(){
const俚语=这个。get lang()；
等待this.setLocale(俚语);
还这个；
}
//获取/更新语言
getLang() {
//获取定义语言
//需要取饼干里面的值的话就加上
//俚语=cookies。get( language ) 导航器。语言 zh-CN ；
让俚语=航海家。语言 zh-CN ；
回归俚语；
}
//设置区域语言
异步设置区域设置（俚语){
//异步加载语言消息
常量加载消息=异步函数（俚语){
const ome messages={ }；
尝试{
//本地语言文件
const oProjectMessage=await import(` ./$ {俚语} `);
//需要元素里面的语言包的话就加上
//const oElementMessage=await import(
//` element-ui/lib/locale/lang/$ { sLang } `
//);
//分配语言消息
对象。分配（
信息，
oProjectMessage.default，
//oElementMessage.default，
);
} catch(错误){
抛出新错误(错误)；
}
返回消息；
};
常量消息=等待加载消息(俚语);
//vue-i18n的方法
this.setLocaleMessage(俚语，omemessages)；
//更新语言
this.locale=俚语；
}
}
导出默认的新i18n()；
*main.js
从“Vue”导入Vue
从导入应用程序. 1/app。vue ；
从导入路由器./路由器；
从导入i18n ./lang/index ；//引入i8n配置
导入“正常化。CSS”；
vue。配置。生产提示=假；
//初始化i18n和某视频剪辑软件
i18n.init().然后(异步(oI18n)={
新Vue({
路由器，
i18n: oI18n，//挂在在某视频剪辑软件下
渲染：函数(h) {
返回h(App)；
},
}).$ mount( # app )；
});
以上异步方式适合应用在项目用默认的国际化语言，如果在页面上切语言的话，会很不方便，需要大刷。
下面推荐一下页面上有切语言的，非异步方式，一次加载所有的国际化文件。
非异步步方式，每次加载所有的包
lang/index.js
从“Vue”导入Vue//引入某视频剪辑软件
从" vue-i18n "导入VueI18n//引入i18n
//从" element-ui/lib/locale"//导入区域设置引入元素国际化配置
从" js-cookie "导入曲奇；
从导入cn ./zh-CN ；//简体中文语言文件
从导入tw ./zh-TW ；//繁体中文语言文件
从导入恩./en ；
vue。使用(vue i18n)；
const locale=cookie。get( language ) 导航器。语言 zh-CN ；
//创建实例并且挂在自定义语言包
const i18n=new VueI18n({
区域设置：区域设置，//默认语言为中文
消息：{
zh-CN: cn，
zh-TW: tw，
恩，
},
silentTranslationWarn: true，
});
//locale.i18n((键，值)=i18n.t(键，值));//把元素的语言包挂在到i18n中
导出默认i18n//导出实例
主页。射流研究…
*从“Vue”导入Vue
从导入应用程序. 1/app。vue ；
从导入路由器./路由器；
从导入i18n ./lang/index ；//引入i8n配置
导入“正常化。CSS”；
//导入通用插件
从导入实用程序./utils ；
vue。配置。生产提示=假；
//安装实用程序
vue。使用(utils)；
新Vue({
路由器，
i18n，//挂在在某视频剪辑软件下
渲染：函数(h) {
返回h(App)；
},
}).$ mount( # app )；
/* 路由发生变化修改页面标题*/
router.beforeEach(收件人，发件人，下一个)={
如果（收件人姓名){
文档。title=` $ { i18n。t( title )}-$ { i18n。t(到。name)} `；
}
next()；
});
lang/zh-CN.js
导出默认值{
标题： 梦醒在笑-标题，
编辑： 修改，
}
郎
导出默认值{
标题：标题，
编辑："编辑",
}
lang/zh-TW.js
导出默认值{
标题： 繁體標題，
编辑： 編輯，
}
使用
在超文本标记语言中使用
div{{ $i18n.t(title)}}/div
在射流研究…中使用
这个i18n美元。t(标题)
切语言
非异步方式切换完页面不用刷新。
//在页面上这样调用昌隆( zh-TW )昌隆( zh-CN )昌隆( en )
changeLang(lang) {
//切换语言
这个. lang=lang
这个. locale=lang
这个. utils.cookie.set(language ，lang)；
},
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。