一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

Nuxt3-学习之路 07， 布局-默认布局

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的 乱七八糟 的 知识点。

布局

按我的理解来说，Nuxt3 的 布局 就 相当于 带有插槽的组件。

• 我们一个文件中，引入一个组件，然后通过插槽的形式，往里面放置内容。

布局 的位置，是需要在与app同级目录下创建一个名为 layouts 的文件夹。目录结构为：

-| layouts/
-| app.vue

默认布局

默认布局 需要在 layouts 文件夹下，创建一个名为 default.vue 的文件。目录结构为：

-| layouts/
---| default.vue
-| app.vue

可以看到文件中有一个 slot 插槽，这个跟 vue 的插槽一样。我们在一个新的文件中，引用这个默认布局的文件，在标签里面编写内容，会将里面的内容插入到这个默认布局组件的页面中。

根路由

之后我们先在 根路由 的位置处放置

• 这里再回顾一下根路由所在的位置为：

  -| pages/
  ---| index.vue
  -| app.vue
  

  

编写默认布局的一个引入方式，通过 <NuxtLayout name="default"> </NuxtLayout>

• 注意 name 的值，为 default.vue 的文件名。

  

• 重新启动项目，运行，发现默认布局已经生效

  

上面，我们说到了使用插槽，那么我们往标签 <NuxtLayout> 里面添加 测试插槽布局，可以看到会将我们的内容显示出来。

动态路由

上面既然可以在 根路由 显示，那么这个 默认布局 是否可以在 动态路由 中显示呢？

下面我们进行快速测试一下 动态路由

• 先在父路由上引入

  

  

  可以看到在两个 子路由 均可以显示

• 在子路由上引入

  

  

  可以看到在 子路由 自己页面定义的 默认布局 会各自在自己的页面中显示。

总结

学习了 Nuxt3 的布局 - 默认布局 的使用，通过标签 和 插槽 的一个方式，一起来使用，进行构成 布局系统。