06. Nuxt3布局模板

布局模板的作用就是你先定义好一个布局页面，然后提取一些通用的 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 class="">
        <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 中组件的使用。