【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>