布局目录 Layouts directory #

Nuxt 提供了一个可定制的布局架构，您可以在整个应用程序中使用它，非常适合将常见的 UI 或代码模式提取到可重用的布局组件中。

页面布局放置在 layouts/ 目录中，使用时会通过异步导入自动加载。 如果你创建了一个 layouts/default.vue 这将用于你应用中的所有页面。 通过将 layout 属性设置为组件选项的一部分来使用其他布局。

如果您的应用程序中只有一个布局，您也可以使用 app.vue。

自定义布局 #

-| layouts/
---| custom.vue

在你的布局文件中，你需要使用 <slot /> 来定义你的布局页面内容的加载位置。 例如：

<template>
  <div>
    一些共享的布局内容：
    <slot />
  </div>
</template>

根据上面的示例，您可以使用这样的自定义布局：

<script>
export default {
  layout: "custom",
}
</script>

与 <slot /> 一起使用 #

您还可以通过使用 <NuxtLayout> 组件(该组件在整个应用程序中都可用)和在组件选项中设置 layout: false 来获得完全的控制权(例如，使用 slots)。

<template>
  <NuxtLayout name="custom">
    <template #header> 一些标题模板内容。 </template>

    页面的其余部分
  </NuxtLayout>
</template>

<script>
export default {
  layout: false,
}
</script>

与 <script setup> 一起使用 #

如果你正在使用 Vue <script setup> 编译时语法糖，你可以使用辅助的 <script> 标记根据需要设置 layout 选项。

假设这个目录结构：

-| layouts/
---| custom.vue
-| pages/
---| my-page.vue

和这个 custom.vue 布局：

<template>
  <div>
    一些共享的布局内容：
    <slot />
  </div>
</template>

你可以在 my-page.vue 中地<script setup> 标签旁边使用辅助地 <script> 设置一个页面布局，像下面这样:

<script>
export default {
  layout: "custom",
}
</script>

<script setup>
// 你的 setup 内容
</script>