<NuxtPage>

Source
Компонент <NuxtPage> отображает страницы из директории pages/.

<NuxtPage> — встроенный компонент Nuxt. Он отображает страницы верхнего уровня и вложенные из директории app/pages/.

<NuxtPage> — обёртка над <RouterView> из Vue Router. Используйте его вместо <RouterView>, так как он корректно учитывает внутреннее состояние. Иначе useRoute() может возвращать неверные пути.

<NuxtPage> по сути включает следующие компоненты:

<template>
  <RouterView v-slot="{ Component }">
    <!-- Опционально при использовании переходов -->
    <Transition>
      <!-- Опционально при использовании keep-alive -->
      <KeepAlive>
        <Suspense>
          <component :is="Component" />
        </Suspense>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

По умолчанию Nuxt не включает <Transition> и <KeepAlive>. Их можно включить в nuxt.config или через пропсы transition и keepalive у <NuxtPage>. Для отдельной страницы настройки задаются в definePageMeta в компоненте страницы.

Если включаете <Transition> на странице, у неё должен быть один корневой элемент.

Поскольку <NuxtPage> использует внутри <Suspense>, жизненный цикл компонентов при смене страницы отличается от обычного Vue-приложения.

В обычном Vue-приложении новый компонент страницы монтируется только после полного размонтирования предыдущего. В Nuxt из-за реализации Vue <Suspense> новый компонент страницы монтируется до размонтирования предыдущего.

Пропсы

  • name: указывает <RouterView> имя компонента из опции components совпавшего маршрута.
    • тип: string
  • route: объект маршрута с разрешёнными компонентами.
    • тип: RouteLocationNormalized
  • pageKey: управляет тем, когда компонент NuxtPage перерисовывается.
    • тип: string или function
  • transition: глобальные переходы для всех страниц, отображаемых через NuxtPage.
  • keepalive: сохранение состояния страниц при переключении.
Nuxt автоматически определяет name и route, сканируя Vue-компоненты в директории /pages.

Пример

Если передать ключ, который не меняется, <NuxtPage> отрендерится только один раз — при первом монтировании.

app/app.vue
<template>
  <NuxtPage page-key="static" />
</template>

Можно задать динамический ключ на основе текущего маршрута:

<NuxtPage :page-key="route => route.fullPath" />
Не используйте здесь объект $route — это может нарушить отрисовку страниц с <Suspense>.

Ключ pageKey также можно задать через definePageMeta в <script> компонента страницы в /pages.

app/pages/my-page.vue
<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath,
})
</script>
Прочитайте и отредактируйте живой пример в Docs > 4 X > Examples > Routing > Pages.

Ref страницы

Чтобы получить ref компонента страницы, используйте ref.value.pageRef

app/app.vue
<script setup lang="ts">
const page = ref()

function logFoo () {
  page.value.pageRef.foo()
}
</script>

<template>
  <NuxtPage ref="page" />
</template>
my-page.vue
<script setup lang="ts">
const foo = () => {
  console.log('foo method called')
}

defineExpose({
  foo,
})
</script>

Собственные пропсы

<NuxtPage> также принимает произвольные пропсы, которые можно передавать вниз по иерархии.

В примере ниже значение foobar передаётся в NuxtPage, а затем в компоненты страниц.

app/app.vue
<template>
  <NuxtPage :foobar="123" />
</template>

В компоненте страницы проп foobar доступен так:

app/pages/page.vue
<script setup lang="ts">
const props = defineProps<{ foobar: number }>()

console.log(props.foobar) // 123
</script>

Если проп не объявлен через defineProps, переданные в <NuxtPage> пропсы всё равно доступны через attrs страницы:

app/pages/page.vue
<script setup lang="ts">
const attrs = useAttrs()
console.log(attrs.foobar) // 123
</script>
Узнать больше Docs > 4 X > Directory Structure > App > Pages.