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

В Nuxt.js, создание динамического маршрута с параметрами ЧПУ (человекопонятный URL) возможно с помощью файловой системы и динамических маршрутов.

1. Создайте директорию с названием, соответствующим вашим параметрам в папке pages. Например, если вы хотите создать динамический маршрут с параметром id, создайте папку с именем _id.

2. Внутри этой папки создайте файл index.vue. Этот файл будет отображаться при обращении к маршруту с заданными параметрами.

3. В index.vue вы можете получить доступ к параметрам через объект $route.params. Например, для получения значения параметра id, вы можете использовать $route.params.id. Это значение можно использовать для запросов к API или отображения содержимого.

4. В файле nuxt.config.js добавьте конфигурацию динамического маршрута в поле generate.routes. Например:

module.exports = {
  generate: {
    routes: function () {
      // Получить список всех объектов с API или из вашей базы данных
      const objects = [
        { id: 1 },
        { id: 2 },
        { id: 3 }
      ]

      // Создать массив динамических маршрутов для каждого объекта
      return objects.map(object => `/object/${object.id}`)
    }
  }
}

5. После этого, при генерации статического сайта с помощью команды nuxt generate, будут созданы HTML-файлы для всех динамических маршрутов, определенных в generate.routes. Каждый файл будет иметь ЧПУ, соответствующий заданным параметрам.

Теперь ваш динамический маршрут с ЧПУ должен быть доступен для просмотра и работы с параметрами.