Nuxt3【布局】layouts 详解

Nuxt 内置布局框架，用法如下：

修改 app.vue

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

• NuxtLayout 为 Nuxt 的内置组件，默认加载 layouts/default.vue ，若页面中指定了布局，则加载对应的布局组件。
• NuxtPage 为 Nuxt 的内置组件，默认加载 pages/index.vue，具体由页面路由决定。

命名布局

NuxtLayout 的 name 属性可以指定其他布局，如

  <NuxtLayout name="shop"><NuxtPage /></NuxtLayout>

则 NuxtLayout 会默认加载 layouts/shop.vue

布局名称的规范化

布局名称会被规范化为 kebab-case，即 layouts/myShop.vue 的布局名为 my-shop

默认布局

在项目中新建目录 layouts，在 layouts 中新建文件 default.vue，内容为

<template><div><p>默认的页眉</p><slot /></div>
</template>

• 页面的内容，会在 slot 中渲染

自定义页面布局 definePageMeta

禁用布局

definePageMeta({layout: false,
});

使用指定的布局

definePageMeta({layout: "shop", // 指定的布局名
});

动态改变页面布局 setPageLayout

<button @click="changeLayout">更新布局</button>

function changeLayout() {setPageLayout("shop");
}

嵌套布局

页面中，也可直接使用 NuxtLayout 组件

<template><div><NuxtLayout name="custom"><template #header> 一些页眉模板内容。 </template>页面的其余部分</NuxtLayout></div>
</template>

但 NuxtLayout 通常不用作根元素，除非禁用了页面布局。

definePageMeta({layout: false,
});