Question

我正在使用Nuxt创建一个新网站，目前将其设置为多语言（法语和英语）

我按照this tutorial进行了翻译和语言切换器的设置，并得到了以下内容：

nuxt.config.js（相关部分）

    ['nuxt-i18n', {
      detectBrowserLanguage: {
        useCookie: true,
        alwaysRedirect: true
      },
      strategy: 'prefix_except_default',
      defaultLocale: 'fr',
      parsePages: false,
      seo: true,
      pages: {
        about: {
          en: '/about-us',
          fr: '/a-propos'
        },
        portfolio: {
          en: '/projects',
          fr: '/portfolio'
        }
      },
      locales: [
        {
          code: 'en',
          iso: 'en-US',
          name: 'English',
          file: 'en-US.js'
        },
        {
          code: 'fr',
          iso: 'fr-FR',
          name: 'Français',
          file: 'fr-FR.js'
        }
      ],
      lazy: true,
      langDir: 'lang/'
    }]

navbar.vue

  <nav class="header">
    <div class="logo">
      <nuxt-link :to="localePath('index')">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
      </nuxt-link>
    </div>
    <div class="links">
      <nuxt-link :to="localePath('about')">
        {{ $t('navbar.about') }}
      </nuxt-link>
      <nuxt-link :to="localePath('blog')">
        Blog
      </nuxt-link>
      <nuxt-link :to="localePath('portfolio')">
        Portfolio
      </nuxt-link>
      <nuxt-link :to="localePath('contact')">
        Contact
      </nuxt-link>
      <span>|</span>
      <nuxt-link v-if="$i18n.locale === 'fr'" :to="switchLocalePath('en')">
        English
      </nuxt-link>
      <nuxt-link v-else :to="switchLocalePath('fr')">
        Français
      </nuxt-link>

      {{ $i18n.locale }}
    </div>
  </nav>

这是我的目录结构（如果有帮助的话）

layouts/
  front.vue
  navbar.vue

pages/
  index.vue
  about.vue
  blog.vue
  portfolio.vue
  contact.vue

navbar.vue文件在front.vue内部被调用，这是我的布局。

问题如下：

在任何页面上，当我尝试单击languageSwitcher链接时，都会重定向到其英文版本（ ie ：/a-propos变为/en/about-us），但是其他链接会把我带回到法语版本。
{{ $i18n.locale }}继续显示fr
我尝试了以下代码块：

<template>
  ...
  <nuxt-link
    v-for="locale in availableLocales"
    key="locale.code"
    :to="switchLocalePath(locale.code)"
  >
    {{ locale.name }}
  </nuxt-link>
  ...
</template

<script>
export default {
  computed: {
    availableLocales () {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
    }
  }
}
</script>

它只显示英语，而应该同时显示英语和法语。

我做错了什么，或者我想念什么？

Answer 1

这对我有用，它使用Nuxt-$i18n的vue-select和availableLocales，希望对您有帮助：

<template>
  <div>
    <client-only>
     <b-navbar>
       <div class="container">
      <b-navbar-brand
        class="navbar-brand-custom mr-2"
        :to="localePath('index')"
        :title="title">

      <div class="d-flex flex-row order-2 order-lg-3 ml-auto text-capitalize">
        <b-navbar-nav class="d-flex flex-row">
          <!-- Language menu -->
          <v-select
            v-model="selected"
            v-for="(lang, index) in availableLocales"
            :key="index"
            :value="lang.code"
            :searchable="false"
            @input="onChange"
            class="vue-select-custom"
          ></v-select> 
          <!-- Navbar menu -->
          <b-nav-item-dropdown
            id="menu-links"
            right
            no-caret
            role="manu"
            class="ml-0"
            menu-class="animated fadeIn text-right menu-links rounded-0"
          >
            <span class="dropdown-menu-arrow"></span>

            <template
              v-slot:button-content
              style="height:42px"
            >
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </div>
    </div>
  </b-navbar>
  </client-only>

<script>
  export default {
   data() {
     return {
       selected: this.$i18n.locale
     }
   },
   computed: {
    availableLocales() {
     return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
   },
 },
 .....
 methods: {
  onChange(locale) {
    var language = locale.toLocaleLowerCase();
    this.$i18n.setLocaleCookie(language)
    this.$router.replace(this.switchLocalePath(language));
  },
  ....
 }
}

Answer 2

这归因于alwaysRedirect: true，请将其设置为false

语言切换器不应用新的语言环境

2 个答案: