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

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

<NuxtPage> - это обертка для компонента <RouterView> из Vue Router.
Он принимает те же входные параметры: name и route.
<NuxtPage> следует использовать вместо <RouterView>, поскольку требуется дополнительная обработка внутренних состояний. В противном случае useRoute() может возвращать неверные пути.

Входные параметры

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

Пример

Например, при передаче ключа static, компонент 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 > 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> также принимает пользовательские входные параметры, которые вам, возможно, потребуется передать ниже по иерархии.

Эти пользовательские входные параметры доступны в приложении Nuxt через attrs.

<NuxtPage :foobar="123" />

Например, в приведенном выше примере значение foobar будет доступно с помощью $attrs.foobar в шаблоне или useAttrs().foobar в <script setup>

Узнать больше Docs > Guide > Directory Structure > Pages.