参考网址

当前关于 Nuxt3 的 layout 的使用，官网和网上的一些开发文档都有些问题。我结合网上的一些资料以及自己本地代码的测试情况，完善 layout 的使用说明。

一、layout 的作用

layout 是 Nuxt 提供的一个可定制的布局架构。页面布局放入 layouts/ 目录中，使用时会通过 异步导入自动加载。

通过 layout 属性设置为组件选项的一部分来使用其他布局。

注意：使用时要利用 <NuxtLayout> 标签 & definePageMeta 使用，否则不生效。

一、默认布局

如果你在 layouts 目录中创建了一个 default.vue，这将用于你应用中的所有页面。

布局文件 default.vue

利用 <slot /> 标签来接受内容

<template>
  <div>
    <h1>
      default layouts
      <slot />
    </h1>
  </div>
</template>

使用方式1：结合 <NuxtPage> 路由出口使用 <NuxtLayout> 标签包裹 <NuxtPage>标签

<template>
  <div>
    <h1>nuxt3 app</h1>
    <!-- 布局出口 -->
    <NuxtLayout>
      <!-- 路由出口 -->
      <NuxtPage></NuxtPage>
    </NuxtLayout>
  </div>
</template>

使用方式2：在其他页面中使用

<template>
  <div>
    <h1>nuxt3 app</h1>
    <!-- 布局出口 -->
    <NuxtLayout>
      <div> ohter page </div>
    </NuxtLayout>
  </div>
</template>

二、自定义布局

布局文件 custom.vue

<template>
  <div>
    <h1>Some shared layout content:</h1>
    <div style="margin-top: 20px; padding: 20px; background: pink">
      <slot name="header">
        <h2>自定义内容标题</h2>
      </slot>
      <div class="custom">
        <slot />
      </div>
      <h2>自定义内容标题</h2>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.custom {
  width: 100%;
  display: flex;
  background: green;
}
.custom h1 {
  color: #ccc;
}
.custom div {
  flex: 1 1 auto;
}
</style>

使用方式1：设置layout属性为 false，同时设置 <NuxtLayout> 标签属性

<template>
  <div>
    <!-- path => /index.index -->
    <NuxtLayout name="blog"><div>I am index.index</div></NuxtLayout>
  </div>
</template>
<script>
// export default 中设置 `layout:false`,在该情况下是有效的
// export default {
//     layout: false
// }
definePageMeta({
  layout: false,
});
</script>

使用方式2：设置 layout 属性为 custom（即布局页面的名称）。这种情况下，必须使用 definePageMeta 方法，在 export default 中设置 layout 属性是无效的。

<template>
  <div>
    <NuxtLayout>
      <div style="height: 500px; background: yellow">Left</div>
      <div style="height: 500px; background: red">Right</div>
    </NuxtLayout>
  </div>
</template>

<script>
definePageMeta({
  layout: 'custom',
});
</script>

Nuxt3 layouts的使用

一、layout 的作用

一、默认布局

二、自定义布局