Как выполнить динамические роуты с подстановкой slug в Nuxt 3?

Question

[g_kowall]

Есть небольшой сайт с блогом. Фронт на Nuxt 3. Бэкенд - Directus (headless cms). Для связи с бэком на Nuxt добавлено дополнение "nuxt-directus". Фронт с бэком расположены на разных поддоменах. В принципе все работает, контент на Nuxt из бэкенда выводится. Но есть один "затык" - в Directus посты блога создаются с адресами, типа my-site.com/blog/1 , my-site.com/blog/2 и т.д. А я хочу "человеческие" адреса типа my-site.com/blog/my-post. Для этого я создал поле "slug", которое вместе с другим контентом "отдается" бэком в JSON. Нагуглил и перепробовал кучу разных способов как выполнить замену ID на slug, но пока решить вопрос не удалось. При попытке вывести страницу со "slug" браузер выдает ошибку 500. Дело, конечно, усугубляется тем, что я пока еще слабо знаю код, разбираюсь в Nuxt и в теме обмена данными по API. Как я понял сложность в том, что в Directus ID созданного поста становится в БД его Primary Key. Чтобы выполнить замену мне советовали создать фильтр подобного вида:

var items = await getItems({
      collection: "blog",
      params: {
        filter: { slug: "SLUG" }
      },
    });

ну и плюс к этому я изменил страницы на фронте с [...id].vue на [slug].vue, но ничего не получилось. В настоящее время для выводов постов с ID на фронте (на странице [...id].vue) используется следующий код:

<script setup>
const { getItemById } = useDirectusItems();
const route = useRoute();
const post = await getItemById({ collection: "blog", id: route.params.id });
</script>

Если кто-то сталкивался с подобным - посоветуйте как это можно решить.

Answer 1

[Денис]

Чтобы выполнить динамическую маршрутизацию с подстановкой slug в Nuxt 3, тебе нужно внести несколько изменений в вашу текущую настройку.

Создайте новый файл в каталоге /pages вашего проекта Nuxt, например /pages/blog/_slug.vue. Этот файл будет обрабатывать маршрутизацию постов вашего блога, используя slug вместо ID.

В разделе сценария этого нового файла тебе нужно будет использовать хук useDirectusItems из дополнения nuxt-directus для получения данных о записях блога из бэкенда. Вместо метода getItemById тебе нужно будет использовать метод getItems и передать объект filter для фильтрации данных на основе slug.

<script>
const { getItems } = useDirectusItems();
const route = useRoute();
const post = await getItems({
  коллекция: "blog",
  params: {
    фильтр: { slug: route.params.slug }
  }
});
</script>

В файле nuxt.config.js необходимо обновить свойство generate для обработки динамической маршрутизации для нового файла /_slug.vue.

generate: {
  routes: function() {
    return axios.get('http://your-backend-url/items/blog')
      .then((res) => {
        return res.data.data.map((post) => {
          return '/blog/' + post.slug
        })
      })
  }
},

Наконец, тебе нужно будет обновить ссылки в проекте Nuxt, чтобы они указывали на новые маршруты, используя slug, а не ID.
После этих изменений посты вашего блога должны быть доступны с использованием slug в URL, а маршрутизация будет осуществляться динамически на основе данных из бэкенда.

Comments

[Денис]

Эта ошибка (Failed to load resource: the server responded with a status of 500 (Internal Server Error)) обычно указывает на наличие проблемы с кодом на стороне сервера, она не позволяет ему успешно завершить запрос.

В данном случае, похоже, что проблема может быть связана с фильтром, который вы пытаетесь применить в функции getItems. Объект фильтра должен содержать пары ключ-значение, которые соответствуют именам полей и желаемым значениям для фильтрации коллекции. Похоже, что вы пытаетесь отфильтровать коллекцию "blog" по полю "slug" и значению "SLUG", но неясно, откуда берется фактическое значение slug.

Чтобы решить эту проблему, надо убедиться, что значение slug передается объекту фильтра. Можешь передать его в качестве параметра в функции getItems.
Также надо убедиться, что маршрутизация настроена правильно. Nuxt использует пакет vue-router для обработки маршрутизации на стороне клиента, поэтому тебе нужно будет обновить конфигурацию маршрутизатора для сопоставления входящих URL с нужным компонентом.
Вы можете использовать модуль @nuxtjs/router для динамической загрузки компонента на основе slug.

Также важно убедиться, что сервер правильно настроен для работы с динамической маршрутизацией. Возможно придется обновить код на стороне сервера, чтобы он обрабатывал запросы к URL со slugs и возвращал правильное содержимое.

[g_kowall]

Денис, спасибо за ответ! Хотел бы уточнить некоторые детали.

Создайте новый файл в каталоге /pages вашего проекта Nuxt, например /pages/blog/_slug.vue...

Если не ошибаюсь, конструкция _slug.vue (название файла) применялась в Nuxt 2. Я же использую Nuxt 3 и судя по примерам кода здесь применяются названия файлов [slug].vue или [...slug].vue .

[g_kowall]

Денис,

В файле nuxt.config.js необходимо обновить свойство generate..

Судя по всему, вы действительно имеете в виду Nuxt 2, т.к. в Nuxt 3 файл идет с расширением TS ( nuxt.config.ts). И к тому же речь идет о применении axios, который также вроде мало применяется в Nuxt 3 .