<NuxtPage> · Компоненты Nuxt

<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.

Nuxt предоставляет компонент NuxtClientFallback для отображения его содержимого на клиенте, если какой-либо из его дочерних элементов вызывает ошибку в SSR

Nuxt предоставляет компонент <NuxtLayout> для отрисовки лейаута на страницах и страницах с ошибками.