<NuxtPage>
<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
- тип:
name и route, сканируя и отображая все файлы компонентов Vue, найденные в директории /pages.Пример
Например, при передаче ключа static, компонент NuxtPage рендерится только один раз при монтировании.
<template>
<NuxtPage page-key="static" />
</template>
Вы также можете использовать динамический ключ, основывающийся на текущем маршруте:
<NuxtPage :page-key="route => route.fullPath" />
$route, так как это может вызвать проблемы с тем, как <NuxtPage> рендерит страницы с <Suspense>.В качестве альтернативы можно передать pageKey в качестве значения key через definePageMeta из тега <script> компонента Vue в директории
/pages.
<script setup lang="ts">
definePageMeta({
key: route => route.fullPath
})
</script>
Ссылка на страницу
Чтобы получить ref компонента страницы, обратитесь к нему через ref.value.pageRef
<script setup lang="ts">
const page = ref()
function logFoo () {
page.value.pageRef.foo()
}
</script>
<template>
<NuxtPage ref="page" />
</template>
<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>