Nuxt3教程之：layouts

前言#

layouts是Nuxt 提供了一个布局框架，用于将常见的 UI 模式提取为可重用的布局。本篇教程主要讲解一下layouts的一些基本概念

正文#

1. layouts 是一个约定的文件夹名称，必须叫这个名称才能起作用
2. layouts文件夹中如果创建了 default.vue 这个文件, 则会给路由中的所有页面都套一个 default.vue
3. 使用了default.vue，并且在 pages 目录中的vue中使用了 <NuxtLayout></NuxtLayout> 组件，相当于套了两层 layouts.vue; NuxtLayout标签默认的name是default，加了一层；default.vue会默认加一层。
4. 如果不想被自动套layouts,可以不创建 default.vue，使用自定义名字的文件名：例如：abc.vue;在使用时都是用 <NuxtLayout name='abc'></NuxtLayout>
5. 抛开默认layouts文件，开始使用layouts 有两种方法：使用<NuxtLayout> 标签和在 definePageMeta 方法中设置layout属性

后记#

多看几遍文档，多看几遍，多看几遍
https://nuxt.com.cn/docs/guide/directory-structure/layouts