layouts
Nuxt 提供了一个布局框架，用于将通用的 UI 模式提取到可重用的布局中。
为了获得最佳性能，放置在此目录中的组件将在使用时通过异步导入自动加载。
启用布局
通过在您的 app.vue 中添加 <NuxtLayout> 来启用布局：
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
要使用一个布局：
- 在您的页面中使用 definePageMeta 设置一个
layout属性。 - 设置
<NuxtLayout>的name属性。
布局名称会被规范化为 kebab-case，因此
someLayout 变为 some-layout。如果没有指定布局，则会使用
layouts/default.vue。如果您应用中只有一个布局，我们建议使用
app.vue 代替。与其他组件不同，您的布局必须有一个单一的根元素，以便 Nuxt 在布局变化之间应用过渡效果——并且这个根元素不能是
<slot />。默认布局
添加一个 ~/layouts/default.vue：
layouts/default.vue
<template>
<div>
<p>一些默认布局内容，跨所有页面共享</p>
<slot />
</div>
</template>
在布局文件中，页面的内容将显示在 <slot /> 组件内。
命名布局
目录结构
-| layouts/
---| default.vue
---| custom.vue
然后您可以在页面中使用 custom 布局：
pages/about.vue
<script setup lang="ts">
definePageMeta({
layout: 'custom'
})
</script>
您也可以直接覆盖所有页面的默认布局，通过使用 <NuxtLayout> 的 name 属性：
app.vue
<script setup lang="ts">
// 您可能基于 API 调用或登录状态来选择这个
const layout = "custom";
</script>
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
如果您的布局位于嵌套目录中，布局的名称将基于其自身的路径目录和文件名，重复的部分会被移除。
| 文件 | 布局名称 |
|---|---|
~/layouts/desktop/default.vue | desktop-default |
~/layouts/desktop-base/base.vue | desktop-base |
~/layouts/desktop/index.vue | desktop |
为了清晰起见，我们建议布局的文件名与其名称相匹配：
| 文件 | 布局名称 |
|---|---|
~/layouts/desktop/DesktopDefault.vue | desktop-default |
~/layouts/desktop-base/DesktopBase.vue | desktop-base |
~/layouts/desktop/Desktop.vue | desktop |
Read and edit a live example in Docs > Examples > Features > Layouts.
动态改变布局
您还可以使用 setPageLayout 辅助函数动态更改布局：
<script setup lang="ts">
function enableCustomLayout () {
setPageLayout('custom')
}
definePageMeta({
layout: false,
});
</script>
<template>
<div>
<button @click="enableCustomLayout">更新布局</button>
</div>
</template>
Read and edit a live example in Docs > Examples > Features > Layouts.
按页面基础覆盖布局
如果您正在使用页面，可以通过设置 layout: false 并在页面内部使用 <NuxtLayout> 组件来完全控制。
<script setup lang="ts">
definePageMeta({
layout: false,
})
</script>
<template>
<div>
<NuxtLayout name="custom">
<template #header> 一些头部模板内容。 </template>
页面其余部分
</NuxtLayout>
</div>
</template>
如果您在页面中使用
<NuxtLayout>，请确保它不是根元素（或禁用布局/页面过渡）。