Вложенные маршруты

Вложенный маршрут — страница, которая выводится внутри другой страницы. Родитель задаёт общую часть раздела (заголовок, вкладки), а дочерняя страница меняется в зависимости от адреса. Так удобно делать разделы с вкладками, например панель управления блогом.

Как устроены файлы

Вложенность появляется, когда рядом лежат файл и папка с одним именем:

app/pages/
├── admin.vue
└── admin/
    ├── index.vue
    └── comments.vue

Родительская страница

Файл app/pages/admin.vue из урока о макетах станет родителем. Добавьте в него вкладки и <NuxtPage />:

<!-- app/pages/admin.vue -->
<script setup lang="ts">
definePageMeta({
  layout: 'admin'
})
</script>
 
<template>
  <section>
    <h2>Панель управления</h2>
    <nav>
      <NuxtLink to="/admin">Статьи</NuxtLink>
      <NuxtLink to="/admin/comments">Комментарии</NuxtLink>
    </nav>
    <NuxtPage />
  </section>
</template>

<NuxtPage /> внутри страницы работает так же, как в app.vue, только выводит дочернюю страницу.

Дочерние страницы

Создайте два файла:

<!-- app/pages/admin/index.vue -->
<template>
  <div>
    <h3>Статьи</h3>
    <p>Здесь будет список статей для правки.</p>
  </div>
</template>

<!-- app/pages/admin/comments.vue -->
<template>
  <div>
    <h3>Комментарии</h3>
    <p>Здесь будут новые комментарии.</p>
  </div>
</template>

Откройте /admin и переключайте вкладки: заголовок «Панель управления» и вкладки остаются на месте, меняется только нижняя часть.

Параметры в дочерних страницах

Дочерняя страница может быть динамической, например app/pages/admin/[id].vue для правки статьи по адресу /admin/5. Родитель при этом тоже видит параметр через useRoute().params.id.

Когда вложенность не нужна

Список статей app/pages/posts/index.vue и страница статьи app/pages/posts/[id].vue — отдельные страницы. Файла app/pages/posts.vue у них нет, поэтому каждая из них занимает всё место внутри макета. Это правильно: у списка и статьи нет общей части.

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

Если создать app/pages/posts.vue рядом с папкой app/pages/posts/, все страницы из папки станут его детьми. Когда в posts.vue нет <NuxtPage />, по адресам /posts/1 и /posts/new будет видно только содержимое posts.vue. Либо добавьте <NuxtPage /> в родителя, либо перенесите его содержимое в posts/index.vue, если вложенность не задумывалась.