布局目录 Layouts directory

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

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

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

自定义布局

  1. -| layouts/
  2. ---| custom.vue

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

  1. <template>
  2.   <div>
  3.     一些共享的布局内容：
  4.     <slot />
  5.   </div>
  6. </template>

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

  1. <script>
  2. export default {
  3.   layout: "custom",
  4. }
  5. </script>

与 <slot /> 一起使用

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

  1. <template>
  2.   <NuxtLayout name="custom">
  3.     <template #header> 一些标题模板内容。 </template>
  5.     页面的其余部分
  6.   </NuxtLayout>
  7. </template>
  9. <script>
  10. export default {
  11.   layout: false,
  12. }
  13. </script>

与 <script setup> 一起使用

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

::: tip 💡 提示： 在 Vue 文档中了解更多关于 <script setup> 和 <script> 标签共存 的内容。 :::

假设这个目录结构：

  1. -| layouts/
  2. ---| custom.vue
  3. -| pages/
  4. ---| my-page.vue

和这个 custom.vue 布局：

  1. <template>
  2.   <div>
  3.     一些共享的布局内容：
  4.     <slot />
  5.   </div>
  6. </template>

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

  1. <script>
  2. export default {
  3.   layout: "custom",
  4. }
  5. </script>
  7. <script setup>
  8. // 你的 setup 内容
  9. </script>