Структура проекта Nuxt 3 и маршрутизация на основе файлов
Автоматический импорт из pages/, layouts/ и components/, именование файлов для вложенных маршрутов и маршруты catch-all
«Структура проекта Nuxt 3 и маршрутизация на основе файлов» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Что такое Nuxt 3
Nuxt 3 — метафреймворк на основе Vue 3. Он добавляет серверный рендеринг, маршрутизацию на основе файлов, автоматические импорты и серверный движок, поэтому Вы можете создавать полнофункциональные приложения на Vue почти без настройки.
Каталог pages
Каталог pages/ управляет маршрутизацией. Каждый файл .vue автоматически становится маршрутом — ручная настройка маршрутизатора не нужна. pages/about.vue соответствует адресу /about.
pages/
index.vue -> /
about.vue -> /about
contact.vue -> /contactВключение маршрутизатора
Маршрутизатор активируется, как только появляется каталог pages/. Добавьте <NuxtPage /> в app.vue, чтобы отобразить найденную страницу.
<!-- app.vue -->
<template>
<NuxtPage />
</template>Вложенные маршруты
Папки создают вложенные пути. pages/blog/index.vue обслуживает /blog, а pages/blog/archive.vue — /blog/archive.
pages/
blog/
index.vue -> /blog
archive.vue -> /blog/archiveДинамические сегменты с [id]
Заключите имя файла в квадратные скобки, чтобы создать динамический сегмент. pages/users/[id].vue соответствует /users/42, предоставляя id как параметр маршрута.
// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"Перехват всех путей с [...slug]
Форма с многоточием [...slug].vue задаёт маршрут для любого пути. Она соответствует пути любой глубины и идеально подходит для содержимого CMS или собственной обработки ошибки 404.
pages/
[...slug].vue -> /a, /a/b, /a/b/c ...Каталог layouts
Папка layouts/ содержит компоненты-обёртки, общие для разных страниц: заголовки, боковые панели и нижние колонтитулы. layouts/default.vue оборачивает каждую страницу, если это не переопределено.
<!-- layouts/default.vue -->
<template>
<header>My Site</header>
<slot />
</template>Выбор макета
Страница выбирает макет с помощью definePageMeta. Слот в макете отображает содержимое страницы.
<script setup>
definePageMeta({ layout: 'admin' })
</script>Автоматически импортируемые компоненты
Всё, что находится в components/, импортируется автоматически — оператор импорта не нужен. Вложенные папки добавляют префикс к имени: components/base/Button.vue превращается в <BaseButton />.
components/
TheHeader.vue -> <TheHeader />
base/Button.vue -> <BaseButton />Автоматически импортируемые композаблы
Каталог composables/ также импортируется автоматически. Экспортированные оттуда функции и встроенные функции Nuxt, например useFetch, можно использовать где угодно без импорта.
// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importingДругие важные каталоги
Nuxt также определяет plugins/ (запускаются при старте), middleware/ (защита маршрутов), server/ (логика API и сервера) и public/ (статические ресурсы, обслуживаемые без изменений).
Быстрая проверка
Проверьте свои знания о структуре Nuxt и маршрутизации.
Итоги
Вы изучили структуру Nuxt:
- pages/ предоставляет маршрутизацию на основе файлов; папки создают вложенные маршруты.
- [id] — динамический сегмент, а [...slug] — маршрут для любого пути.
- layouts/ оборачивает страницы; макет выбирается через definePageMeta.
- components/ и composables/ импортируются автоматически.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Структура проекта Nuxt 3 и маршрутизация на основе файлов» бесплатный?
Да — полный текст урока «Структура проекта Nuxt 3 и маршрутизация на основе файлов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Структура проекта Nuxt 3 и маршрутизация на основе файлов»?
Автоматический импорт из pages/, layouts/ и components/, именование файлов для вложенных маршрутов и маршруты catch-all Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Структура проекта Nuxt 3 и маршрутизация на основе файлов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Структура проекта Nuxt 3 и маршрутизация на основе файлов
- Получение данных: useFetch и useAsyncData
- Серверные маршруты и конечные точки API Nuxt
- Режимы SSR, SSG и SPA