pages (страницы)

Использование

Страницы — это Vue-компоненты с поддерживаемыми расширениями (по умолчанию .vue, .js, .jsx, .mjs, .ts, .tsx).

Nuxt автоматически создаёт маршрут для каждого файла в ~/pages/.

<template>
  <h1>Index page</h1>
</template>

export default defineComponent({
  render () {
    return h('h1', 'Index page')
  },
})

export default defineComponent({
  render () {
    return <h1>Index page</h1>
  },
})

Файл app/pages/index.vue соответствует маршруту /.

При использовании app.vue для отображения текущей страницы нужен компонент <NuxtPage/>:

<template>
  <div>
    <NuxtPage />
  </div>
</template>

У страницы должен быть один корневой элемент для переходов между маршрутами. HTML-комментарии тоже считаются элементами.

Примеры корректной и некорректной разметки:

<template>
  <div>
    Page content
  </div>
</template>

<template>
  <!-- Два корневых узла из-за комментария — переходы сломаются -->
  <div>Page content</div>
</template>

<template>
  <div>This page</div>
  <div>Has more than one root element</div>
</template>

Динамические маршруты

Часть имени файла или папки в квадратных скобках становится динамическим параметром. Можно комбинировать несколько параметров и обычный текст.

Для опционального параметра используйте двойные скобки: ~/pages/[[slug]]/index.vue или ~/pages/[[slug]].vue совпадут и с /, и с /test.

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

Доступ к group и id в компоненте — через $route:

<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

Для /users-admins/123 будет: <p>admins - 123</p>.

В Composition API используйте глобальную функцию useRoute.

Catch-all маршрут

Файл вида [...slug].vue обрабатывает все маршруты под этим путём.

<template>
  <p>{{ $route.params.slug }}</p>
</template>

Для /hello/world: <p>["hello", "world"]</p>.

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

Вложенные маршруты отображаются через <NuxtPage>.

-| pages/
---| parent/
-----| child.vue
---| parent.vue

В parent.vue нужно вставить <NuxtPage> для вывода дочернего компонента:

<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

Ключ дочернего маршрута

Чтобы управлять перерисовкой <NuxtPage> (например, для переходов), передайте строку или функцию в проп pageKey или задайте key в definePageMeta:

<template>
  <div>
    <NuxtPage :page-key="route => route.fullPath" />
  </div>
</template>

Или в дочерней странице: definePageMeta({ key: route => route.fullPath }).

Группы маршрутов

Папка в круглых скобках () группирует маршруты без влияния на URL.

-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue

Получатся маршруты /, /about, /contact. Группа marketing в URL не участвует.

Группы доступны в route.meta.groups.

Метаданные страницы

Метаданные маршрута задаются макросом definePageMeta в <script> или <script setup>:

<script setup lang="ts">
definePageMeta({
  title: 'My home page',
})
</script>

Данные доступны в приложении через route.meta. При вложенных маршрутах мета объединяется. Подробнее: vue-router meta.

definePageMeta — компиляционный макрос, его нельзя вызывать в коде компонента. Мета поднимается при компиляции, поэтому в объекте мета нельзя ссылаться на компонент, но можно на импорты и чистые функции.

Специальные метаданные

alias

Алиасы страницы — доступ к той же странице по разным путям (строка или массив), см. vue-router.

keepalive

При keepalive: true Nuxt оборачивает страницу в Vue <KeepAlive>. Для сохранения состояния родителя используйте <NuxtPage keepalive />. Значение по умолчанию задаётся в nuxt.config.

key

См. выше.

layout

Лейаут для маршрута: false, строка или ref/computed. Подробнее о лейаутах.

layoutTransition и pageTransition

Настройки для <transition> вокруг страницы и лейаута; false отключает обёртку. Опции Transition, переходы. Значения по умолчанию — в nuxt.config.

middleware

Мидлвар перед загрузкой страницы (строка, функция или массив). Именованный мидлвар.

name, path, props

Имя маршрута, кастомный path matcher, передача params как пропсов — см. vue-router.

Типизация кастомных метаданных

declare module '#app' {
  interface PageMeta {
    pageType?: string
  }
}
export {}

Навигация

Для ссылок между страницами используйте компонент <NuxtLink>.

Программная навигация

Через утилиту navigateTo() можно переходить программно. Всегда await-йте результат или возвращайте его из функции.

Только клиент / только сервер

Страница только для клиента: суффикс .client.vue. Только для сервера: .server.vue; при клиентской навигации страница рендерится как серверный компонент, код не попадает в клиентский бандл.

Кастомная маршрутизация

При усложнении приложения маршрутизацию можно настраивать: роутер, маршруты и опции роутера доступны для кастомизации.

Несколько директорий pages

По умолчанию все страницы в одной app/pages. Nuxt Layers позволяют объединять страницы из разных источников.