Файловая маршрутизация: pages в роуты

Имя файла в pages/ — это и есть URL. Никаких списков роутов: структура папок напрямую становится картой маршрутов.

Суть: Nuxt автоматически строит маршруты из файлов в папке pages/. Файл index.vue отвечает за корень папки, вложенные папки дают вложенные пути, а компонент NuxtPage показывает текущую страницу. Это устраняет ручную настройку роутера.

Файловая маршрутизация — самая характерная черта Nuxt. В чистом Vue вы бы вручную писали массив маршрутов: путь, компонент, имя. В Nuxt вы просто создаёте файлы, и роутер собирается сам. Это и удобнее, и нагляднее: чтобы понять структуру сайта, достаточно посмотреть на дерево папок.

Правила простые. Файл pages/index.vue — это главная страница /. Файл pages/about.vue — страница /about. Папка с файлом внутри даёт вложенный путь: pages/blog/index.vue отвечает за /blog, а pages/blog/first.vue — за /blog/first. Имя файла index всегда означает «корень этой папки».

   Файлы в pages/        ->   Маршруты (URL)

   pages/index.vue       ->   /
   pages/about.vue       ->   /about
   pages/blog/index.vue  ->   /blog
   pages/blog/first.vue  ->   /blog/first
   pages/shop/cart.vue   ->   /shop/cart

Чтобы маршруты вообще заработали, в корневом app.vue должен стоять компонент <NuxtPage /> — это «окно», в которое Nuxt подставляет компонент текущего маршрута. Думайте о нём как о <router-view> из мира Vue Router, только настроенном автоматически. Если в проекте есть папка pages/, но нет <NuxtPage />, страницы просто не отобразятся.

Вот как выглядит минимальный app.vue (это Vue-компонент, поэтому показан как текст):

<template>
  <div>
    <header>Мой магазин</header>
    <NuxtPage />  <!-- сюда подставится текущая страница -->
  </div>
</template>

Как работает под капотом

При сборке Nuxt обходит дерево pages/ и генерирует конфигурацию Vue Router: каждому файлу сопоставляется объект маршрута с путём и ленивой загрузкой компонента. Этот сгенерированный код лежит в .nuxt/. По сути Nuxt делает за вас ровно ту работу, которую вы делали бы руками во Vue, но выводит структуру из файловой системы.

Смоделируем превращение путей файлов в маршруты — простым преобразованием строк:

// Как Nuxt строит URL из пути файла в pages/.
function fileToRoute(file) {
  let path = file
    .replace(/^pages/, "")      // убираем префикс папки
    .replace(/\.vue$/, "")      // убираем расширение
    .replace(/\/index$/, "");   // index -> корень папки
  return path === "" ? "/" : path;
}

const files = [
  "pages/index.vue",
  "pages/about.vue",
  "pages/blog/index.vue",
  "pages/blog/first.vue",
  "pages/shop/cart.vue",
];

for (const f of files) {
  console.log(f.padEnd(24), "->", fileToRoute(f));
}

Попробуй сам ▶ — этот разбор путей и есть упрощённая суть файлового роутера Nuxt.

Частые ошибки

Забыть <NuxtPage />. Без него страницы из pages/ не выводятся, а виден только app.vue.
Назвать файл не index для корня папки. pages/blog/blog.vue даст /blog/blog, а не /blog.
Путать app.vue и страницу. app.vue — корневой каркас на всё приложение, а не отдельный маршрут.

Best practices

Проектируйте дерево pages/ так, чтобы оно читалось как карта сайта.
Группируйте связанные страницы в подпапки — это и URL, и порядок в коде.
Общие элементы (шапка, подвал) держите не в страницах, а в app.vue или в layout.

Итог: в Nuxt структура папки pages/ — это и есть карта маршрутов, а <NuxtPage /> — окно для текущей страницы. Дальше добавим динамику: маршруты с параметрами.

Стоит отметить, как файловый роутинг влияет на сопровождение проекта. В приложении с ручной конфигурацией маршрутов добавление страницы — это правка в нескольких местах: создать компонент, прописать путь, не забыть про вложенность. В Nuxt достаточно создать файл в нужной папке, и маршрут появляется сам. Удаление страницы — просто удаление файла. Это снижает порог входа для новых членов команды: чтобы понять структуру сайта, им не нужно искать конфиг роутера — достаточно посмотреть на дерево pages/, которое читается как оглавление.