<NuxtLayout>
Nuxt 提供了 <NuxtLayout> 组件来在页面和错误页面上显示布局。
您可以使用 <NuxtLayout /> 组件在 app.vue 或 error.vue 上激活 default 布局。
app.vue
<template>
<NuxtLayout>
一些页面内容
</NuxtLayout>
</template>
属性
名称: 指定要渲染的布局名称，可以是字符串、可反应引用或计算属性。它 必须 与layouts/目录中对应布局文件的名称匹配。- 类型:
字符串 - 默认值:
默认
- 类型:
pages/index.vue
<script setup lang="ts">
// layouts/custom.vue
const layout = 'custom'
</script>
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
请注意布局名称会被标准化为 kebab-case，因此如果您的布局文件名为
errorLayout.vue，当它作为 name 属性传递给 <NuxtLayout /> 时，它将变成 error-layout。error.vue
<template>
<NuxtLayout name="error-layout">
<NuxtPage />
</NuxtLayout>
</template>
fallback: 如果传递给name属性的布局无效，将不渲染任何布局。指定一个fallback布局来在这样的场景下渲染。它 必须 与layouts/目录中对应布局文件的名称匹配。- 类型:
字符串 - 默认值:
null
- 类型:
额外属性
NuxtLayout 还接受任何您可能需要传递给布局的额外属性。这些自定义属性然后通过属性变得可用。
pages/some-page.vue
<template>
<div>
<NuxtLayout 名称="custom" title="我是一个自定义布局">
<-- ... -->
</NuxtLayout>
</div>
</template>
在上面的例子中，标题 的值在 custom.vue 的模板中可用使用 $attrs.title，或者在 <script setup> 中可用使用 useAttrs().title。
layouts/custom.vue
<script setup lang="ts">
const layoutCustomProps = useAttrs()
console.log(layoutCustomProps.title) // I am a custom layout
</script>
过渡
<NuxtLayout /> 通过 <slot /> 渲染传入的内容，然后将其包裹在 Vue 的 <Transition /> 组件中以激活布局过渡。为了使这一切按预期工作，建议 <NuxtLayout /> 不要是页面组件的根元素。
<template>
<div>
<NuxtLayout name="custom">
<template #header> 一些头部模板内容。 </template>
</NuxtLayout>
</div>
</template>
布局的引用
要获取布局组件的引用，通过 ref.value.layoutRef 访问它。
<script setup lang="ts">
const layout = ref()
function logFoo () {
layout.value.layoutRef.foo()
}
</script>
<template>
<NuxtLayout ref="layout">
默认布局
</NuxtLayout>
</template>