【Nuxt3】layouts的使用

简言

Nuxt 提供了一个布局框架，用于将常见的 UI 模式提取为可重用的布局。

为了获得最佳性能，在使用时，放置在此目录中的组件将通过异步导入自动加载。

layouts

layouts文件夹存放的是ui布局文件，就是实现一个页面整体架构规则的vue组件，默认样式布局是在layouts/default.vue组件。

启用布局

通过在 app.vue 中添加 <NuxtLayout>，可以启用布局：

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

<NuxtLayout>有一个name属性，可以指定默认布局文件。
若页面要指定特殊的布局组件，则可以在页面中使用 definePageMeta 设置 layout 属性。

 definePageMeta({
    layout: 'small',
  });

默认布局

添加 ~/layouts/default.vue：

<template>
  <div>
    <p>一些在所有页面之间共享的默认布局内容</p>
    <slot />
  </div>
</template>

在布局文件中，页面的内容将显示在 组件中。

布局命名

如果你在嵌套目录中有一个布局，则布局的名称将基于其自身的路径目录和文件名，并删除重复的段,为了清晰起见，建议布局的文件名与其名称相匹配：

动态布局

可以使用 setPageLayout 辅助函数动态更改布局：

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

<template>
  <div>
    <button @click="enableCustomLayout">更新布局</button>
  </div>
</template>

页面上覆盖布局

如果你使用页面，可以通过设置 layout: false，然后在页面内部使用 组件来完全控制布局。

如果在页面中使用 ，请确保它不是根元素（或者禁用布局/页面过渡效果）。

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

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> 一些页眉模板内容。 </template>

      页面的其余部分
    </NuxtLayout>
  </div>
</template>

示例

small布局：

<template>
  <div class="small">
    <p>这是公用的small布局内容 12323</p>
    <slot />
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
</script>
<style lang="scss" scoped></style>

big布局：

<template>
  <div class="big">
    <h1>这是big布局</h1>
    <slot />
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
</script>
<style lang="scss" scoped></style>

页面：

<template>
  <div class="index">
    <NuxtLayout name="small">
      页面的其余部分
      <button @click="enableCustomLayout">改变布局</button>
    </NuxtLayout>
  </div>
</template>
<script lang="ts" setup>
  definePageMeta({
    layout: false,
  });
  function enableCustomLayout() {
    setPageLayout('big');
  }
  // useSeoMeta({
  //   title: '我的神奇网站',
  //   ogTitle: '我的神奇网站',
  //   description: '这是我的神奇网站，让我来告诉你关于它的一切。',
  //   ogDescription: '这是我的神奇网站，让我来告诉你关于它的一切。',
  //   ogImage: 'https://example.com/image.png',
  //   twitterCard: 'summary_large_image',
  // });
</script>
<style lang="scss" scoped></style>

结语

这个layouts文件夹里的布局文件是通过vue组件实现的，所有要注意slot插槽的位置。