布局简介
学习如何使用 Nuxt 布局创建可复用的 UI 模板。
**Nuxt 布局** 是一种可复用的 UI 模板，用于定义 Nuxt 应用中网页的整体结构。它作为应用页面的包装器，为多个页面提供一致的视觉风格。布局可以包含组件、导航菜单、页头、页脚以及其他 UI 元素。
Nuxt 中的布局以 Vue 组件的形式定义，可以轻松应用于页面和组件，从而在整个应用中保持一致的样式。
layouts 目录
layouts 目录位于应用根目录下，用于存放应用中使用的布局文件。在该目录中定义的布局将自动注册，可在整个应用中使用。
示例
在下面的单页应用（SPA）中，一个名为 custom.vue 的自定义布局被定义在 layouts 目录中。注意，在首页 pages/index.vue 中，从第 2 行到第 5 行直接使用了该布局，无需手动导入组件。
No configuration found for ID: d5335c30def80b64621a290a1bc9a01d5a75b5899738cd37c89ec54ca2165856
内部机制
Nuxt 中的布局定义方式与普通 Nuxt 组件类似，拥有自己的模板、脚本和样式标签。它可以接收 props，必要时也能触发事件。页面使用布局后的结构主要取决于布局中 <slot /> 标签的位置。
NuxtLayout 组件
NuxtLayout 是 Nuxt 内置的一个组件，用于定义应用中页面的布局结构。它作为页面内容的容器，可用于定义跨多个页面共享的通用 UI 元素，如页头、页脚、侧边栏或其他结构性组件。
name 属性用于指定当前页面应使用哪一个已定义的布局，该属性是可选的。如果未传递 name 属性，则会默认渲染默认布局。NuxtLayout 组件无需传入任何 props，但也可以作为向目标布局传递 props 的通道。
如前一节中 index.vue 与 admin.vue 文件所示，NuxtLayout 组件被用来定义页面的导航栏。
<slot/> 标签
<slot/> 是 Vue 的一个概念，用于在父组件中指定子组件内容的插入位置。在此场景中，父组件是布局组件，子组件则是放置在页面中 NuxtLayout 内的内容。使用 <slot/> 标签可以让页面将内容注入布局，而无需与布局紧密耦合。
在前一节的示例中，可以看到 <slot/> 标签被放置在导航栏下方，表示页面内容在布局中的具体位置。
定义布局
在 Nuxt 中可以定义两种类型的布局：
- 默认布局
- 自定义布局
默认布局
默认布局 如其名所示：即默认的布局。通过在 layouts 目录的根路径下创建一个名为 default.vue 的文件来定义。
要让应用中的所有页面都使用默认布局，只需将 NuxtLayout 组件包裹在目标页面上，并不传入 name 属性即可。
自定义布局
定义自定义布局的方式与默认布局基本相同，唯一的区别在于命名。自定义布局的名称不能为 "default"，可以是任意其他合法名称。
要在一个页面中使用自定义布局，只需将 NuxtLayout 组件包裹在页面上，并将布局名称以连字符命名法（kebab-case）形式传入 name 属性。
示例
在下面的单页应用（SPA）中，可以看到自定义布局被用于管理员页面，而默认布局则被用于首页。
No configuration found for ID: 32c62ae36c97bd4b111e3c8aac64dfd7471cd9521e8ad1d391072bda2ad5da61
总结
Nuxt 布局用于定义 Nuxt 应用中页面的结构。它们作为页面内容的容器，支持定义常见的 UI 元素，如页头、页脚和侧边栏。除了默认布局外，还可以创建自定义布局，通过 NuxtLayout 组件的 name 属性指定页面所使用的布局。此外，布局还可作为向目标布局传递 props 的通道。