Vue-Router 和 i18n 与 Nuxt

Question

我正在将一个带有 vue-router 的项目从 Vue.js 转移到 Nuxt.js。

经过数小时的尝试和谷歌搜索，我设法让一切正常工作，但有一个问题我无法解决：**Integrating i18n and vue-router with Nuxt.js **

两个问题我还没有解决:

如何在我的 router.js 文件中正确更新 i18n.locale？
如何告诉nuxt-i18n我正在使用我自己的路由器？它现在显然抱怨 Route with name 'XXX___en' does not exist.

在我的普通 vue 项目中，以下代码有效，我可以在 router.js 中更改语言环境，它会传播和更新 this.$i18n.

i18n.js

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

import termsHTML from './translations/terms'
import privacyHTML from './translations/privacy'
import imprintHTML from './translations/imprint'

Vue.use(VueI18n)

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

router.js

...
import {
  i18n
} from "@/plugins/i18n.js";
...
router.beforeEach((to, from, next) => {
// Set locale to new language
// I CANT GET THIS NEXT LINE WORING IN NUXT.JS
if (i18n.locale !== lang) i18n.locale = lang
...
}

现在在 Nuxt 中我也想做同样的事情。我在 nuxt.config.js:

中导入了这样的 nuxt-i18n 插件

['nuxt-i18n', {
  seo: true,
  locales: [{
    code: 'en',
    name: '',
    iso: 'en-US'
  },
  {
    code: 'de',
    name: '',
    iso: 'de-DE'
  }],
  defaultLocale: 'en',
  vueI18n: {
    locale: 'en',
    fallbackLocale: 'en',
    messages: translations
  }
}],

我在我的路由器中尝试了以下但没有成功。

router.js

import nuxtConfig from "~/nuxt.config";
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// access the i18n module which is the second item in the modules array
// then take second item which is the config object and take the vueI18n property
let i18n = nuxtConfig.modules[1][1].vueI18n
...
if (i18n.locale !== lang) i18n.locale = lang

这没有错误，但也不起作用。 Vue.use() 在这里可能是错误的，因为它注册了一个新组件，我想我的代码没有引用正确的 i18n?

感谢您的帮助

Answer 1

我现在通过不在路由器文件中而是在始终加载的 NavBar.vue 组件中进行重定向得到了我想要的东西。在那里你可以毫无问题地访问 this.$i18n。

Answer 2

对我有用：

      {
        path: '/:lang([a-z]{0\,2})/blog/authors',
        component: AuthorsList
      },

Vue-Router 和 i18n 与 Nuxt

Vue-Router and i18n with Nuxt

vue.js

nuxt.js

vue-router

vue-i18n

nuxt-i18n