Nuxt 提供了一个可自定义的布局框架，您可以在整个应用程序中使用它，非常适合将通用 UI 或代码模式提取到可重用的布局组件中。
Layouts放在layouts/目录下，使用时会通过异步导入自动加载。
通过将 <NuxtLayout> 添加到您的 app.vue 来使用布局，或者将 layout 属性设置为页面元数据的一部分(如果您使用的是 ~/pages 集成)，或者通过手动指定 它作为 <NuxtLayout> 的道具。
注意：布局名称被标准化为 kebab-case，所以 someLayout 变成了 some-layout。
如果您的应用程序中只有一个布局，我们建议改用 app.vue。
与其他组件不同，您的布局必须有一个单一的根元素，以允许 Nuxt 在布局更改之间应用转换——并且这个根元素不能是 <slot />。
启用默认布局
添加一个 ~/layouts/default.vue 文件:
layouts/default.vue
vue
<template>
<div>
所有页面共享的一些默认布局
<slot />
</div>
</template>
在布局文件中，布局的内容将加载到 <slot /> 中，而不是使用特殊的组件。
如果您使用 app.vue，您还需要添加 <NuxtLayout>：
app.vue
vue
<template>
<NuxtLayout>
一些页面内容
</NuxtLayout>
</template>
设置另一个布局
bash
-| layouts/
---| default.vue
---| custom.vue
您可以像这样直接覆盖默认布局：
app.vue
vue
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
<script setup>
// 您可以根据 API 调用或登录状态选择此项
const layout = "custom";
</script>
或者，您可以像这样覆盖每页的默认布局：
vue
pages/index.vue
vue
<script>
// 这将适用于 `<script setup>` 和 `<script>`
definePageMeta({
layout: "custom",
});
</script>
动态改变布局
您还可以为布局使用 ref 或计算属性。
vue
<script setup>
function enableCustomLayout() {
setPageLayout('custom')
}
definePageMeta({
layout: false,
})
</script>
<template>
<div>
<button @click="enableCustomLayout">
更新布局
</button>
</div>
</template>
每个页面单独设置布局
如果您正在使用 ~/pages 集成，您可以通过设置 layout: false 然后在页面中使用 <NuxtLayout> 组件来完全控制。
vue
pages/index.vue
vue
<script setup>
definePageMeta({
layout: false,
})
</script>
<template>
<div>
<NuxtLayout name="custom">
<template #header>
一些标题模板内容。
</template>
页面的其余部分
</NuxtLayout>
</div>
</template>
如果您在页面中使用<NuxtLayout>，请确保它不是根元素(或禁用布局/页面转换)。