nuxt布局系统

**布局系统 (Layouts)**是保持视觉一致性的核心。它能让你把导航栏（Header）、侧边栏（Sidebar）和页脚（Footer）这些通用组件提取出来，避免在每个pages/*.vue 里重复写代码。

在 Nuxt 中，布局系统遵循“约定大于配置”的原则。

默认布局

1. 创建通用布局

在app目录下创建一个layouts目录（如果还没有的话），并新建一个default.vue。这个名字是特殊的，它是默认布局。

文件路径：****app/layouts/default.vue

<template>
  <div class="my-blog-layout">
    <header>
      <nav>
        <NuxtLink to="/">首页</NuxtLink>
        <NuxtLink to="/about">关于</NuxtLink>
      </nav>
    </header>

    <main>
      <slot />
    </main>

    <footer>
      <p>© 2026 枫枫知道 - 开启 SSR 之旅</p>
    </footer>
  </div>
</template>

<style scoped>
/* 这里写全局通用的样式 */
header { border-bottom: 1px solid #eee; padding: 1rem; }
footer { margin-top: 2rem; text-align: center; color: #888; }
</style>

1. 让页面使用布局

在 Nuxt 4 中，如果你在 app.vue 中使用了 组件，它会自动包裹住页面内容。

修改 app.vue：

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

自定义布局

有些页面可能不需要导航栏，或者需要不同的侧边栏（比如后台管理界面）。你可以创建多个布局文件。

创建layouts/admin.vue****：

<template>
  <div class="admin-container">
    <aside>后台管理侧边栏</aside>
    <section>
      <slot />
    </section>
  </div>
</template>

**在特定页面启用它：**比如在pages/admin/index.vue中，通过definePageMeta指定：

<script setup lang="ts">
definePageMeta({
  layout: 'admin' // 对应 layouts/admin.vue 的文件名
})
</script>

<template>
  <h1>欢迎回来，管理员枫枫</h1>
</template>

动态切换布局

如果你想根据某些逻辑（比如用户是否登录）动态改变布局，可以使用<NuxtLayout :name="layoutName">或者setPageLayout函数。

<script setup lang="ts">
// 某种条件下动态切换到 admin 布局
function enableAdminMode() {
  setPageLayout('admin')
}
</script>