Vue-i18n在Routerd动态路由下实现国际化

在Electron-vue-admin的项目中实现国际化的需求时，遇到一个问题，vue-i8n无法在router/index.js的路由菜单配置项内以下面常规的方法实现。

//vue标签内使用(例：)
$t('login.username')
//例子
<el-inputname="password"v-model="loginForm.password":placeholder="$t('login.password')"></el-input>//vue标签包含文本处使用
{{ $t('login.logIn') }}
//例子
<span v-if="!loading">{{ $t('login.logIn') }}</span>//js下各函数方法内引用
this.$t('login.validateUsername')
//例子
const validateUsername = (rule, value, callback) => {if (!value.valueOf("")) {callback(new Error(this.$t('login.validateUsername')));} else {callback();}};

在router中实现国际化， router 和 i18n 是同级的，所以在router中调用this.$t()会报错

经过百度和测试，一下方法是最好最简单的解决方式：

1.首先配置国际化文件夹内的zh.js 和 en.js

 //zh.js
navbar: {dashboard: '主页',set: '设置',logOut: '退出登录',method: '方法',sample: '样品',user: '用户管理',language: '语言',version: '系统版本'},//en.js
navbar: {dashboard: 'Dashboard',set: 'Set Up',logOut: 'Log Out',method: 'Method',sample: 'Sample',user: 'User',language: 'Language',version: 'Version',phone: 'After sales telephone'},

2.在router路由文件夹下的js配置文件内，对应菜单的title位置写入国际化翻译对应的key。

重点注意的是title位置的key需要单引号，便于动态路由页面加载时查找和实时翻译。

export default [{path: '/form',component: Layout,meta: { roles: ['admin','guest'] },children: [{path: 'index',name: '方法',component: () => import('@/views/form/index'),meta: { title: 'navbar.method', icon: 'table' }}]}
]

3.在使用该路由title的地方使用{{$t(item.name)}}进行国际化

<router-link v-else :to="resolvePath(child.path)" :key="child.name"><el-menu-item :index="resolvePath(child.path)"><svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon><span v-if="child.meta&&child.meta.title" slot="title">{{$t(item.meta.title)}}</span></el-menu-item>
</router-link>

Vue-i18n在Routerd动态路由下实现国际化相关推荐

Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
VUE动态路由下刷新丢失路由的解决方法
目前在使用VUE3.X开发,发现加载动态路由的话,由于刷新页面就会重新加载VUEX,故会丢失已存在的state,但是又不想localStorage,sessionStorage. 经过多次试验,采取在 ...
Vue系列vue-router的动态路由使用（二）
前言首先我们来看看官方文档上是怎么解释动态路由的?走你你可以在一个路由中设置多段"路径参数",对应的值都会设置到 $route.params 中.例如: 一.什么场景下使用动态 ...
十二、Vue项目 - 详情页动态路由、banner布局和公用图片画廊组件拆分
我是一个小菜鸡啊小菜鸡,但是小菜鸡要继续学新东西啊,新的一周加油吧!!! 文章目录配置动态路由 banner.vue 公用图片画廊组件拆分 src下新建common文件夹 banner.vue中使用 ...
Vue 权限菜单（动态路由）详解
今天记录一下Vue的权限菜单(动态路由),在我们写后台的时候用的比较多,Vue的权限菜单分两种,一种是通过本地进行,根据账号的权限进行筛选出可用的权限,组合菜单并在页面上渲染显示,另一种是根据登录的账 ...
vue使用addrouter添加动态路由
路由拦截beforeEach和addRouter 注意: 1.一定要理解beforeEach(全局的路由守卫,每一次路由执行都会触发)和addRoutes的运行机制,这里容易陷入死循环,所以一定要做好 ...
Vue实现角色权限动态路由详细教程，在vue-admin-template基础上修改，附免费完整项目代码
前言 vue-admin-template是一个最基础的后台管理模板,只包含了一个后台需要最基础的东西,如果clone的是它的master分支,是没有权限管理的,只有完整版vue-element-ad ...
动态路由下刷新页面空白
前言最近设计动态路由时,刷新页面空白.突然想起以前笔记里面记录过,翻看了下,今天得空儿分享出来. 问题描述在全局前置守卫router.beforeEach里面加入动态路由设计时,刷新动态页面,明明 ...
Vue踩坑之二级路由下静态资源加载失败
在使用vue开发过程中意外发现 , 当我的路由加到二级时我的页面背景突然没了? 这是怎么回事呢? 让我们先来复现一下问题吧起初我的登陆页面的路由是这样子的我的背景图片是在外部的一个css中写着的 ...

Vue-i18n在Routerd动态路由下实现国际化

Vue-i18n在Routerd动态路由下实现国际化相关推荐

最新文章

热门文章