<NuxtPage>

Исходный код
Компонент <NuxtPage> обязателен для отображения страниц, расположенных в директории pages/.

<NuxtPage> — это встроенный компонент, который идёт вместе с Nuxt. Он позволяет отображать страницы верхнего уровня или вложенные страницы, расположенные в директории 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: сохранение состояния страниц, отображаемых через NuxtPage.
Nuxt автоматически определяет name и route, сканируя и отображая все файлы компонентов Vue, найденные в директории pages/.

Пример

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

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

Вы также можете использовать динамический ключ, основывающийся на текущем маршруте:

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

В качестве альтернативы можно передать pageKey как значение key через definePageMeta в теге <script> компонента Vue в каталоге pages/.

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

Ссылка на страницу

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

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')
}

defineExpose({
  foo,
})
</script>

Пользовательские входные параметры

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

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

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

К пропу foobar в компоненте страницы можно обратиться так:

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

console.log(props.foobar) // 123

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

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