В Nuxt 3, динамические роуты с подстановкой slug создаются с использованием параметров маршрутизации.
Шаг 1: Подготовка проекта
Вам необходимо установить Nuxt 3 или создать новый проект с использованием Nuxt 3. Вы можете сделать это с помощью следующей команды:
npx create-nuxt-app <project-name>
Затем выберите nuxt-edge в качестве предпочитаемой версии Nuxt.
Шаг 2: Создание страницы с динамическим маршрутом
Вы можете создать новый файл с именем pages/_slug.vue. В этом файле _slug будет заменено на имя вашего параметра маршрутизации.
Пример кода:
<template>
<div>
<h1>{{ $route.params.slug }}</h1>
<!-- Здесь можно разместить ваш контент -->
</div>
</template>
<script>
export default {
async fetch() {
// Вы можете использовать этот метод для получения данных для конкретного slug
// Например, загрузить информацию о статье с определенным slug
const slug = this.$route.params.slug;
const article = await this.$axios.$get(`/api/artcles/${slug}`);
// Сохранить данные во Vuex или в локальное состояние компонента
}
}
</script>
В этом примере мы используем $route.params.slug для получения значения slug из URL. Вы можете использовать это значение для получения данных из вашего API, файловой системы или из любого другого источника данных, какой вам нравится. Затем данные можно сохранить во Vuex или в локальное состояние компонента.
Шаг 3: Генерация статических страниц с динамическими маршрутами
В Nuxt 3, вы можете сгенерировать статические страницы с динамическими маршрутами, используя новый синтаксис в файле nuxt.config.js.
Пример кода:
export default {
// ...
target: 'static',
generate: {
async routes() {
// В этом примере мы генерируем страницы для каждого slug из API
const slugs = await this.$axios.$get('/api/slugs');
return slugs.map((slug) => `/articles/${slug}`);
}
}
}
В этом примере мы используем generate.routes для генерации статических страниц с динамическими маршрутами. В методе routes мы получаем все доступные слаги (slug) с помощью API и возвращаем массив URL для генерации. Затем Nuxt 3 сгенерирует статические HTML-файлы для каждого URL.
Это основной процесс для выполнения динамических роутов с подстановкой slug в Nuxt 3. Вы можете обновить данные и контент на странице с помощью метода fetch и использовать параметры маршрутизации для получения slug из URL.