Страницы и маршруты из файлов

В Nuxt не нужно описывать маршруты вручную: каждый файл .vue в папке app/pages/ сам становится страницей, а путь к файлу задаёт её адрес. Такой подход называют маршрутизацией на файлах.

Файл и адрес

Файл index.vue отвечает за адрес самой папки, остальные файлы добавляют своё имя к адресу.

Новая страница

Создайте страницу «О блоге»:

npx nuxi add page about

Команда создаст app/pages/about.vue. Замените содержимое:

<!-- app/pages/about.vue -->
<template>
  <section>
    <h2>О блоге</h2>
    <p>Здесь Анна и Олег пишут о веб-разработке.</p>
  </section>
</template>

Откройте http://localhost:3000/about — появится раздел «О блоге». Перезапускать сервер не нужно: Nuxt замечает новые файлы сам.

Страница в папке

Список статей будет жить по адресу /posts. Создайте файл app/pages/posts/index.vue (или командой npx nuxi add page posts/index):

<!-- app/pages/posts/index.vue -->
<script setup lang="ts">
const posts = [
  { id: 1, title: 'Первый пост', text: 'Привет, мир!' },
  { id: 2, title: 'Изучаем Nuxt', text: 'Страницы из файлов.' }
]
</script>
 
<template>
  <section>
    <h2>Статьи</h2>
    <article v-for="post in posts" :key="post.id">
      <h3>{{ post.title }}</h3>
      <p>{{ post.text }}</p>
    </article>
  </section>
</template>

По адресу /posts появятся две статьи. Пока они записаны прямо в файле; позже список будет приходить с сервера.

Адрес, которого нет

Если открыть адрес без подходящего файла, например /contacts, Nuxt покажет страницу ошибки 404. Позже вы замените её своей.

Как это устроено

Внутри Nuxt использует тот же Vue Router, что и обычное приложение Vue. Разница лишь в том, что список маршрутов Nuxt строит из файлов сам. Все маршруты проекта видны в Nuxt DevTools на вкладке Pages.

Частая ошибка

У страницы должен быть один корневой элемент. Если в <template> рядом стоят, например, <h2> и <p> без общей обёртки, Nuxt выведет в консоль предупреждение, а переходы между страницами могут работать неправильно. Оборачивайте содержимое страницы в один элемент — <section>, <div> или <main>.