布局目录 Layouts

Nuxt 提供了一个布局框架来将常见的 UI 模式提取到可重用的布局中。

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>，请确保它不是根元素(或禁用布局/页面转换)。