Как создавать динамические маршруты в Nuxt3 при I18N?

Для создания динамических маршрутов с поддержкой многоязычности (I18N) в Nuxt.js 3, вам потребуется использовать функционал под названием "Динамический роутинг".

Для начала, установите пакет @nuxt/i18n с помощью npm или yarn, выполнив команду:

npm install @nuxt/i18n

Затем добавьте модуль @nuxt/i18n в файл nuxt.config.js, указав в нем необходимую конфигурацию:

// nuxt.config.js
export default {
  modules: [
    '@nuxt/i18n'
  ],
  i18n: {
    locales: ['en', 'fr', 'es'], // Список поддерживаемых языков
    defaultLocale: 'en', // Язык по умолчанию
    vueI18n: {
      fallbackLocale: 'en', // Сообщает I18N, какой язык использовать, если текущий язык не найден
    },
    strategy: 'prefix', // Используйте префикс языка в URL
    parsePages: false, // Отключите автоматическое разбиение страниц на соответствующие маршруты для каждого языка
    rootRedirect: null, // Отключите перенаправление корневого маршрута на маршрут с языком по умолчанию
    detectBrowserLanguage: false, // Отключите автоматическое определение языка браузера
  }
}

Теперь вы создадите динамический маршрут в папке pages с использованием параметра для идентификации конкретного элемента. Например, создайте файл pages/blog/_slug.vue, который будет представлять собой шаблон для страницы каждого отдельного поста в блоге.

<!-- pages/blog/_slug.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params, app }) {
    const { slug } = params;

    // Здесь вы можете использовать полученный slug для запроса к API или любых других операций

    // Возможно, вы хотите использовать данные для языковых локализаций
    const locale = app.i18n.locale;

    const { data } = await app.$axios.get(`/api/posts/${slug}?lang=${locale}`);

    return {
      post: data,
    };
  },
};
</script>

Теперь для создания динамического маршрута для каждого поста в блоге, вы должны создать соответствующие слаги (идентификаторы) и использовать их при формировании ссылок. Например:

// middleware/i18n.js
export default function ({ app, route, redirect }) {
  // Получите параметр slug из маршрута
  const { slug } = route.params;

  // Получите текущий язык
  const locale = app.i18n.locale;

  // Сформируйте ссылку с учетом текущего языка и slug
  const localizedRoute = `/${locale}/blog/${slug}`;

  // Перенаправьте текущую страницу на локализованную ссылку
  return redirect(localizedRoute);
}

<!-- pages/blog/_slug.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
    <router-link
      v-for="locale in $i18n.locales"
      :key="locale"
      :to="localizedRoute(locale)"
    >
      {{ $i18n.locales[locale] }}
    </router-link>
  </div>
</template>

<script>
export default {
  // ...

  methods: {
    localizedRoute(locale) {
      // Получите текущий slug
      const { slug } = this.$route.params;

      // Формирование ссылок с учетом нужного языка и текущего slug
      return this.$i18n.path(`blog/${slug}`, locale);
    },
  },
};
</script>

Теперь, когда вы посещаете страницу поста в блоге, Nuxt.js автоматически определит текущий язык и перенаправит вас на правильную локализованную страницу. Вы также можете использовать ссылки для переключения между различными языками, используя метод localizedRoute и компонент <router-link>. Обратите внимание, что модуль @nuxt/i18n будет автоматически генерировать соответствующие страницы для каждого языка, учитывая конфигурацию parsePages: false.