vue-i18n国际化概率性报错：Cannot read property '_t' of null怎么解决？

Question

在vue项目中使用国际化插件在切换页面时会概率性报错：Uncaught TypeError: Cannot read property '_t' of null at VueComponent.Vue.$t,有序的重复报错（比如每次都是重复4条）一直停不下来。如果我重新刷新页面报错就会停止。

Answer 1

vue项目，路由快速跳转时，vue-18n有一定概率报错Cannot read property '_t' of null。

原因（我自己的理解）：
页面A和页面B都有配置多语言，如html里的
$t('xxx')，data或method里的this.$t('xxx')。
在页面A跳转B时，页面A的多语言还没加载完成但已经跳转到B页面了，就找不到A页面里的this指向了。

解决办法：
多语言配置文件(我的项目是src下的i18n/index.js)

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from 'element-ui/lib/locale/lang/en'
import jaLocale from 'element-ui/lib/locale/lang/ja'

Vue.use(VueI18n) // 通过插件的形式挂载

let messages = {
  'zh-CN': { ...require('./zh'), ...zhLocale },
  'en-US': { ...require('./en'), ...enLocale },
  'ja-JP': { ...require('./ja'), ...jaLocale },
}

const i18n = new VueI18n({
  locale: 'zh-CN', // 语言标识
  messages
})

export default i18n

配置多语言的单页面里单独引入i18n
页面里 this.$t('xxx') 改成 i18n.t('xxx')

import i18n from '@/i18n/index'