布局目录 layouts 用于组织应用的布局组件。像一般通用的模板，例如 头部 header 与 底部 footer 之类的，也有一些较为通用的通用模板；

布局的使用方法是将 添加到 app.vue 中，或者通过手动给具体某个页面指定为布局。(注意：布局名称被规范化为kebab-case，所以someLayout会变成some-layout）

:::info 与其他组件不同，layout 必须有一个单一的根元素，以允许 Nuxt 在布局变化之间应用过渡，这个根元素不能是一个。 :::

设置默认布局

可以通过添加 layouts/default.vue 文件来扩展应用的默认布局

新建 src/layouts 目录，新建 src/layouts/default.vue 默认布局文件；

<template>
  <div>
    <h1>系统标题</h1>
    <slot />
  </div>
</template>

如果应用程序中只有一个布局，建议在全局页面src/app.vue中配置，这样每个页面中都会有该模板；使用<NuxtLayout>组件应用布局模板 ， 下面例子中使用 将页面添加到模板中的默认 位置 :::warning 如果在页面中使用，请确保不是根元素（或禁用布局/页面过渡）。 :::

<template>
  <div>
    <NuxtLayout>
      <NuxtPage></NuxtPage> 
    </NuxtLayout>
  </div>
</template>

这样所有页面都应用了该布局模板

设置指定页面的块布局

可以为指定页面单独设置布局模板，新建 src/layouts/custom.vue

<template>
  <header class="header">
    <h1>
      <slot name="header"> Default header content </slot>
    </h1>
  </header>
</template>

在 about 页面中使用自定义模板

<template>
  <div>
    <h1>nuxt3 about page</h1>
    <NuxtLayout name="custom">
      <template #header> Some header template content. </template>
    </NuxtLayout>
  </div>
</template>

相当于当做一个布局组件来使用

覆盖默认布局

如果某个页面不想应用默认布局，可以像这样覆盖默认布局：通过 definePageMeta 中的 layout 字段来给页面取消默认布局，然后在页面中使用<NuxtLayout>组件控制布局

<template>
  <div> <!-- 这里必须有一个根元素 -->
    <NuxtLayout name="custom">
      <template #header> nuxt3 about page </template>
      其他页面内容
    </NuxtLayout>
  </div>
</template>
<script setup>
definePageMeta({
  layout: false,
});
const layout = "custom";
</script>

动态更改布局

nuxt 提供 setPageLayout 方法允许您动态更改页面的布局。

<template>
  <div>
    <button @click="enableCustomLayout">Update layout</button>
  </div>
</template>
<script setup>
function enableCustomLayout () {
  setPageLayout('custom') 
}
definePageMeta({
  layout: false,
});
</script>

或者

<template>
  <div>
    <button @click="enableCustomLayout">Update layout</button>
  </div>
</template>
<script setup>
const route = useRoute()
function enableCustomLayout () {
  route.meta.layout = "custom"
}
definePageMeta({
  layout: false, 
});
</script>