layout 布局

默认布局

1. 在 app.vue 中添加 <NuxtLayout> 组件

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

2. 布局组件 均在 layouts 文件夹中进行定义

   例如，默认布局：layouts/default.vue

   <!-- layouts/default.vue -->
   <template>
     <header class="app-header">header</header>
     <main class="app-main">
       <slot></slot>
     </main>
     <footer class="app-footer">footer</footer>
   </template>

命名布局

也可以对布局进行命名

1. 自定义布局

   <!-- layouts/custom.vue -->
   <template>
     <header>custom ...</header>
     <main>
       <slot></slot>
     </main>
   </template>

2. 在页面中指定布局

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

动态更改布局

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

<template>
  <div>
    <button @click="enableCustomLayout">Update layout</button>
  </div>
</template>

覆盖布局

对于一些页面不需要布局组件（如：登录页）进行包装时，可以设置 layout: false 禁用上级布局。

也可以在页面中使用 <NuxtLayout> 组件继续为该页面定制布局。

例如：

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

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Some header template content. </template>
      The rest of the page
    </NuxtLayout>
  </div>
</template>