在Electron-vue-admin的项目中实现国际化的需求时,遇到一个问题,vue-i8n无法在router/index.js的路由菜单配置项内以下面常规的方法实现。
//vue标签内使用(例:)
$t('login.username')
//例子
<el-input
name="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>