布局模板的作用就是你先定义好一个布局页面，然后提取一些通用的 UI 或代码到可重用的模板中，提高代码复用性，从而降低代码的复杂度，让代码重用性提高。
简单说就是把一些通用的 UI 代码代码提出来，然后放在一个模板里，使用这个模板的每个页面都拥有这些代码 UI 了。
创建布局模板和使用模板
比如现在新建一个文件夹layouts然后再里边写编写一个 defalut.vue文件，代码如下：
<template>
<div>
我是布局模板，default.vue
<slot />
</div>
</template>
上边这段代码就相当于你创建了一个布局模板。有了这个模板后，可以在任何你想要使用的页面中用<NuxtLayout>标签为页面赋予模板中的内容。比如我们想在每个页面中都赋予这个模板中的内容，就可以在 app.vue 页面中使用这个标签。
<template>
<NuxtLayout name="default">
<div>
<hello-world />
<NuxtPage></NuxtPage>
</div>
</NuxtLayout>
</template>
这样每个页面都会有布局模板中的效果，因为app.vue是每个页面的出口。
增加多个插槽
修改default.vue布局模板，增加第二个插槽，一个叫做 one，一个叫做 two。
<template>
<div>
我是布局模板，default.vue
<slot name="one" />
---------
<slot name="two" />
</div>
</template>
这样编写，一个模板中就有了两个插槽，你可以在页面中通过<template #xxx>的形式来指定对应的模板插槽。 在index.vue中使用多个 <template> 配合模板实现多插槽。
<template>
<NuxtLayout name="default">
<template #one>
<div >
<h1>Index Page</h1>
<NuxtLink to="/demo1">Demo1.vue</NuxtLink> <br />
<NuxtLink to="/goods-mybj/demo2-38">Demo2.vue</NuxtLink><br />
<NuxtLink to="/parent/child">/parent/child</NuxtLink><br />
<NuxtLink to="/parent/two">/parent/two</NuxtLink><br />
</div>
</template>
<template #two> 我是 two 中的内容 </template>
</NuxtLayout>
</template>
<script setup>
import {} from "vue";
</script>
<style scoped></style>
注意上面的页面就精确的对应了模板的插槽。如果你作的页面都非常相似，可以好好的利用这个模板布局。
这个插槽也可以是多个，只要名字对应正确就可以实现。
结语
布局模板是非常好的一个创意，布局模板再加上组件化，可以大大提高代码的维护性和复用性。所以你想写出漂亮的代码，可以从这两方面多专研。下节我们就学习一下 Nuxt3 中组件的使用。