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

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

//vue标签内使用(例：)
$t('login.username')
//例子
            name="password"
            v-model="loginForm.password"
            :placeholder="$t('login.password')"
          >
 
//vue标签包含文本处使用
{{ $t('login.logIn') }}
//例子
if="!loading">{{ $t('login.logIn') }}
 
//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>