国际化vue-i18n的使用:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
// 引入语言包
import zh from '@/common/i18n/zh';
import en from '@/common/i18n/en'; // 多语
Vue.use(VueI18n); // 实例化语言包
const i18n = new VueI18n({
locale: 'english', // 语言标识,默认英文
// this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'english': en, // 英文语言包
'chinese': zh // 中文语言包
}
}); export default i18n;

vuex获取属性常用方式:

// 在组件和路由页面中使用
this.$store.state.xxxx

我的目录结构

router
--index.js // 暴露router对象,用于注入vue
--a.js // a模块路由,index.js引入
--b.js // b模块路由,index.js引入
--c.js // c模块路由,index.js引入
store
--index.js // 暴露vuex对象,用于注入vue
--stateX.js // 组件X的状态和方法
--stateY.js // 组件Y的状态和方法
i18n
--index.js // 暴露多语对象,用于注入vue
--en.js // 英文语言包
--zh.js // 中文语言包

我的需求是要在router里面a.js获取vuex中保存的数据,并且设置i18n的语言。
由于a.js里面并没有vue的this对象,调用方法和获取属性这就是个问题了,作为一个vue新手,百度一番之后还是没找到解决办法。

最终自己尝试一番之后 ,发现可直接引入vuex和i18n暴露的对象,直接在路由中使用,使用方法:

// router/a.js

// 引入多语配置
import i18n from '@/i18n';
// 引入vuex
import store from '@/store'; // i18n设置语言
i18n.locale = 'chinese'; // vux使用方法:
// 调用方法
store.commit('xxx');
// 获取属性
const x = store.state.xxxx;

以上处理方式可能不够优雅,欢迎大神指导。

vue-cli之路由独立成JS文件之后,如何在路由中获取vuex属性或者设置国际化i18n的当前使用语言的更多相关文章

  1. matrix-gui-2.0 将javascript文件夹改成js文件夹

    /******************************************************************************** * matrix-gui-2.0 将 ...

  2. 独立的js文件中不能使用EL表达式取值

    在独立的js文件中写了一个EL表达式取值,发现没有取到值,原因在于不能在独立的js文件中使用EL表达式,可以在jsp页面定义全局变量,然后在js文件中引用

  3. 在JAVA中将class文件编译成jar文件包,运行提示没有主清单属性

    在JAVA中将class文件编译成jar文件包,运行提示没有主清单属性 Maven 项目生成jar运行时提示“没有主清单属性” 新建了一个Maven的项目,mvn compile和mvn packag ...

  4. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  5. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  6. 六、Vue-Router:基础路由处理、路由提取成单独文件、路由嵌套、路由传参数、路由高亮、html5的history使用

    一.vue-router的安装 官网文档 [官网]:https://cn.vuejs.org/v2/guide/routing.html [router文档]:https://router.vuejs ...

  7. angular ,require.js, angular-async-loader实现单页面路由,控制器js文件分离

    https://github.com/heboliufengjie/appRoute/tree/re re 分支,实现,路由配置,控制器js文件分离

  8. java代码将excel文件中的内容列表转换成JS文件输出

    思路分析 我们想要把excel文件中的内容转为其他形式的文件输出,肯定需要分两步走: 1.把excel文件中的内容读出来: 2.将内容写到新的文件中. 举例 一张excel表中有一个表格: 我们需要将 ...

  9. vue 打包后app.css,verondor.js文件过大

    参考:https://blog.csdn.net/feiyu_may/article/details/80987404         https://blog.csdn.net/qq_4199961 ...

随机推荐

  1. MEF在WCF REST中实际应用2(Global.asax注册)

    IOCContainer文件: public class IOCContainer { /// <summary> /// 容器 /// </summary> public s ...

  2. CSS疑难杂症

    1.text-align: center + letter-spacing: 2em 字体不居中 办法:添加text-indent: 2em 2.first-child伪类选择不到元素 办法:确保备选 ...

  3. Python人工智能第二篇:人脸检测和图像识别

    Python人工智能第二篇:人脸检测和图像识别 人脸检测 详细内容请看技术文档:https://ai.baidu.com/docs#/Face-Python-SDK/top from aip impo ...

  4. Code Clean读书笔记

    代码整洁之道读书笔记 by fangpc 序言部分 "神在细节之中" - 建筑师路德维希 5S哲学(精益) 整理(Seiri):搞清楚事物之所在--通过恰当地命名之类的手段--至关 ...

  5. 如何统一管理单个任务下所有API的同步情况?

    1. 一分钟完成单个API配置 单个API的配置包含:API名称.URL地址.请求方式.参数设置.自定义高级设置. 参数允许用户填写:Text.WebService.Timestamp.DependO ...

  6. 基于 k8s-搭建 Kubernetes 的 web 管理界面

    查看我们的k8s环境是否正常: 使用kubectl get nodes 获取我们的节点的信息: 到此说明我们的kubernetes环境是正常的,接下来就可以实验了 第一步在master上传所需的软件包 ...

  7. linux搭建stm32开发环境

    下载stm32固件库 创建目录 libs目录放stm32固件库,src放用户源码,inc放用户头文件 # mkdir libs src inc 复制文件 将STM32F10x_StdPeriph_Li ...

  8. idea2019的安装与激活

    1.安装及相关资料下载 链接:https://pan.baidu.com/s/1njKjorAvaWftuGCvCQzP3A 提取码:r8h8 2.安装步骤 几乎是傻瓜式的安装,点击下一步即可 注意两 ...

  9. let 和 var 定义变量的区别

    一.变量提升 var 存在变量提升,而 let 不存在变量提升,所以用 let 定义的变量一定要在声明后再使用,否则会报错. var //var定义的变量存在变量提升,变量会把声明提升到整个作用域的最 ...

  10. dom4j 解析字符串成树形结构

    引入maven依赖: <dependency> <groupId>dom4j</groupId> <artifactId>dom4j</artif ...