解决vue i18n 项目中 title 双英 切换问题_i18n.t is not a function

主要问题点在于 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')}`
    }

router/index.js中(关键点是里面设置的title要和i18n配置中的相对应)：

export default new Router({
  mode: 'history',
  routes: [
    { path: '/XX', name: 'XX',meta: { title: 'A' },……},
    { path: '/XX', name: 'XX',meta: { title: 'B' }, …… },
  ]
})

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 的语言环境。