主要问题点在于 router 中无法用 this.$t('xxx.xx') 方法来进行翻译，会报错 this.$t is not a function 。而在main.js中可以试用，所以就做了一下处理：

main.js文件：

const i18n = new Vue18n({locale: lan,messages: {zh: require("./assets/i18n/zh"),en: require("./assets/i18n/en")},silentTranslationWarn: true
})router.beforeEach((to, from, next) => {if (to.meta.title) {document.title = `${i18n.t('meta.'+to.meta.title)} - ${i18n.t('meta.base')}`}next()
})

navbar.vue中点击切换语言：

    changeLan(type) {this.$i18n.locale = type;document.title = `${i18n.t('meta.'+this.$route.meta.title)} - ${i18n.t('meta.base')}`}

en.js/zh.js配置：

module.exports = { meta:{base:'XXX',A:'XXX',B:'X',E:'XX'}
};

这样下来点击切换页面title也同时改变，爽歪歪，哈哈

当然目前代码有点冗余，两处改变document.title的方法都一样，提公用下,assets/js中新建title.js：

export function getPageTitle(i18n,key) {const hasKey = i18n.te(`meta.${key}`)const title = i18n.t(`meta.base`)if (hasKey) {const pageName = i18n.t(`meta.${key}`)return `${pageName} - ${title}`}return `${title}`
}

这个方法是参考 vue-element-admin i18n分支里的方法，比较完善一些。

分别在main.js和navbar.vue中引入：

import { getPageTitle } from './assets/js/title';

import { getPageTitle } from '../../assets/js/title';

main.js中：

const i18n = new Vue18n({locale: lan,messages: {zh: require("./assets/i18n/zh"),en: require("./assets/i18n/en")},silentTranslationWarn: true
})router.beforeEach((to, from, next) => {if (to.meta.title) {document.title = getPageTitle(i18n,to.meta.title)}next()
})

navbar.vue中：

    changeLan(type) {this.$i18n.locale = type;document.title = getPageTitle(this.$i18n,this.$route.meta.title)}

然后OK。

另附上Vue i18n 官方API：

$te

• 参数：

  • {Path} key：必填
  • {Locale} locale：可选

• 返回值：boolean

检查 key 是否存在。在 Vue 实例中，如果未指定组件语言环境信息，则使用全局语言环境信息。如果指定了 locale，则使用 locale 的语言环境。