Nuxt js国际化(i18n)实例讲解中如何触发语言？

Question

在Nuxt.Js文档中，有一个国际化(i18n)的例子。我得到了大部分，但我没有得到的是如何单击导航栏菜单上的语言选项将区域设置从 'en' 更改为 'fr'，反之亦然，这会触发语言交换。

代码如下： https://nuxtjs.org/examples/i18n

默认布局

<nuxt-link class="Header__Link" v-if="$i18n.locale === 'en'" :to="`/fr` + $route.fullPath" active-class="none" exact>
     {{ $t('links.french') }}
</nuxt-link>
<nuxt-link class="Header__Link" v-else :to="$route.fullPath.replace(/^\/[^\/]+/, '')" active-class="none" exact>
     {{ $t('links.english') }}
</nuxt-link>

这是现场演示： https://i18n.nuxtjs.org/

谁能解释一下？

谢谢。

Answer 1

它使用vue-i18n。看看 plugins/i18n.js 和 middleware/i18n.js。例如，当访问 /fr/... 时，商店中的语言环境设置为 fr.

Nuxt js国际化(i18n)实例讲解中如何触发语言？

How to trigger language in Nuxt js internationalization (i18n) example explanation?

javascript

vue.js

vuejs2

nuxt.js