layouts

Nuxt 提供了一个布局框架，用于将常见的 UI 模式提取为可重用的布局。

INFO

为了获得最佳性能，在使用时，放置在此目录中的组件将通过异步导入自动加载。

启用布局

通过在app.vue中添加<NuxtLayout>可以启用布局:

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

使用布局的时候

• 在页面中使用 definePageMeta 设置 layout 属性。

• 设置 <NuxtLayout> 的 name 属性。

INFO

1. 布局名称会被规范化为 kebab-case,因此someLayout将变为some-layout

2. 如果没有指定布局,将使用layouts/default.vue

3. 如果应用程序中只有一个布局,建议使用app.vue

4. 与其他组件不同,布局必须具有单个根元素,以允许 Nuxt 在布局更改的时候使用动画效果,并且根元素不能是<slot>/元素

默认布局

• 添加 ~/layouts/default.vue

<template>
  <div>
    <p>一些在所有页面之间共享的默认布局内容</p>
    <slot />
  </div>
</template>

在布局文件中，页面的内容将显示在 <slot /> 组件中。

命名布局

使用

• 目录

-| layouts/
---| default.vue
---| custom.vue

• (1) 然后你可以在页面中使用custom布局

<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

• (2)你可以直接通过 <NuxtLayout> 的 name 属性覆盖所有页面的默认布局：

<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	Bdesktop-base
~/layouts/desktop/index.vue	desktop

为了清晰可见 建议布局的文件名与其名称相匹配

文件	布局名称
~/layouts/desktop/DesktopDefault.vue	desktop-default
~/layouts/desktop-base/DesktopBase.vue	Bdesktop-base
~/layouts/desktop/Desktop.vue	desktop

函数更改布局

• 你还可以使用 setPageLayout 辅助函数动态更改布局：

<script setup lang="ts">
  function enableCustomLayout() {
    setPageLayout("custom");
  }
  definePageMeta({
    layout: false,
  });
</script>

<template>
  <div>
    <button @click="enableCustomLayout">更新布局</button>
  </div>
</template>