Vue.js 在加载路由之前加载vue-i18n消息

我正在尝试使用

我希望它的工作方式是，JSON文件将具有特定路由URL的翻译

e、 g.

{'home\u url'：'home'}

然后在我的路线中，我会使用这样的东西：

export default [
  { path: i18n.t('home_url'), name: 'home', component: Home }
]

但问题是，路由是在导入i18n消息之前加载的

我有没有办法延迟路由加载，直到i18n准备就绪

这是我加载翻译的方式：

import Vue from 'vue'
import store from '~/store'
import VueI18n from 'vue-i18n'
import axios from 'axios'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {}
})

/**
 * @param {String} locale
 */
export async function loadMessages (locale) {
  if (Object.keys(i18n.getLocaleMessage(locale)).length === 0) {
    const messages = await import(/* webpackChunkName: "lang-[request]" */ `~/lang/${locale}`)
    i18n.setLocaleMessage(locale, messages)
  }

  if (i18n.locale !== locale) {
    i18n.locale = locale
    axios.defaults.headers.common['Accept-Language'] = locale
    document.querySelector('html').setAttribute('lang', locale)
  }
}

;(async function () {
  await loadMessages(store.getters['lang/locale'])
})()

export default i18n

导入（/*webpackChunkName:“lang-[request]”*/`~/lang/${locale}`）

是一个网页异步导入，因此它将在加载主应用程序脚本后加载，而不是同时加载

我将推荐两种解决方案（选择一种更适合您的方案）：

删除

loadMessages

函数并同步加载所有Json-s。应用程序包将增长（所有翻译都将在其中），但它将在应用程序启动时加载它们

延迟路由器创建（

router=newrouter（…）

），直到加载所有区域设置（

loadMessages

完成）

---

我尝试了#1解决方案，但似乎在发送消息之前仍会加载路由。另外，您建议我如何延迟路由器的创建？（#2解决方案）我的问题是，我使用了

import

而不是require。现在它起作用了。谢谢但仍然有兴趣知道延迟创建路由器有什么想法。您可以在等待loadMessages（store.getters['lang/locale']）Resolave之后创建路由器（和mount Vue app），但要做到这一点，您必须进行更多更改。您可以尝试在安装Vue应用程序的文件中调用

loadMessages

。我已经尝试过这种方法和许多其他loadMessages方案，但都不起作用。不管怎样，我会坚持1。再次感谢。