Nuxt3-05layout

默认布局

// app.vue

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

根目录新建layouts目录

// default.vue

<template>
  <div class="layout">
    <header>default layout</header>
    <slot></slot>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.layout header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: pink;
  color: blue;
}
</style>

隐藏布局

// login.vue

<template>
  <div>login page</div>
</template>

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

<style scoped></style>

自定义布局

动态切换

在页面中通过使用setPageLayout()方法可以动态切换layout

setPageLayout('custom')