0

我正在尝试为我的 Nuxt 前端设置本地化。每次我切换到英语然后转到我网站的另一个子页面时，它都会重置回德语。

这是我的语言选择器

<template>
  <div class="lang-dropdown">
    <select v-model="$i18n.locale">
      <option
        v-for="lang in $i18n.locales"
        :key="lang.code"
        :value="lang.code"
        onchange="changeLocale"
      >
        {{ lang.name }}
      </option>
    </select>
  </div>
</template>

这是我的 i18n 配置文件

import de from '../locales/de.json'
import en from '../locales/en.json'

export default {
  local: 'en',
  fallbackLocale: 'de',
  messages: { de, en },
  strategy: 'prefix'
}

这是我的 Nuxt.config.js 的 buildModules 部分

 ['nuxt-i18n',
      {
        defaultLocale: 'de',
        seo: true,
        locales: [
          {
            code: 'de',
            name: 'Deutsch',
            iso: 'de-DE'
          },
          {
            code: 'en',
            name: 'English',
            iso: 'en-US'
          }
        ],
        vueI18n: i18n
      }]
4

2 回答 2

2

根据来自 nuxtjs/i18n 文档的引用

当使用 detectBrowserLanguage 并希望在路由更改时保留区域设置时，您必须调用更新存储的区域设置 cookie 的函数之一。调用 setLocaleCookie(locale) 以仅保留 cookie 区域设置或调用 setLocale(locale) 以保留 cookie 区域设置并将路由切换到指定的区域设置。否则，区域设置可能会在导航期间切换回已保存的区域。

https://i18n.nuxtjs.org/lang-switcher

您应该使用$i18n.setLocale而不是更改属性locale
使用setLocale将更改存储所选语言环境的cookie

在您的情况下，此代码应该可以工作

<template>
  <div class="lang-dropdown">
    <select @change="(e) => $i18n.setLocale(e.target.value)">
      <option
        v-for="lang in $i18n.locales"
        :key="lang.code"
        :value="lang.code"
        onchange="changeLocale"
      >
        {{ lang.name }}
      </option>
    </select>
  </div>
</template>
于 2021-01-24T17:26:24.470 回答
0

Al-bimani 的答案是它在文档中所说的。但是它对我不起作用。所以我意识到了我的错误。例如，我有一个这样的 nuxt-link：

<nuxt-link to="/about"> // instead of this I started using this;
<nuxt-link :to="localePath('/about')">

在localePath之前，它在导航后重置区域设置。在 nuxt-link 中添加localePath后，它只会使用您更改的语言环境进行导航。

于 2021-12-02T13:50:20.120 回答