继上一篇文章(nuxt3目录及使用 - 掘金 (juejin.cn))之后，我们继续学习Nuxt的相关使用。

layouts

这次我们先引入一个layouts目录，这个目录是做什么的呢？我们在下面的使用中说清楚。

我们先在根目录下新建一个layouts目录，然后我们在layouts目录下新建一个layout1.vue文件，然后我们开始使用一下神奇的layouts。

内容如下:

<template>
    <header>
        <h1>
            标题
        </h1>
    </header>
    <main>
        <slot></slot>
    </main>
</template>

<script setup lang="ts"></script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

我们先解释一下，首先定义了一个公用的头--标题，然后主要内容可以由后续插入的内容来决定。

我们来实际使用一下:

我们改进一下index.vue中的内容:

<template>
    <NuxtLayout name="layout1">首页</NuxtLayout>
</template>
<script setup lang="ts"></script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

可见，我们通过了一个Nuxt3中提供的NuxtLayout标签，内部指定了name="layout1",再看看我们layouts目录下的文件名字，同样是layout1.vue，参考我们前面的铺垫，我们使用了Nuxt约定的方式，所以我们无需导入导出，直接就可以通过name属性来指定布局方式，我们运行一下看看效果。

确实如预期所想，我们插入的内容自动的放在了插槽中，而上方还是我们定义好的标题。

有什么用？

在业务逻辑开发中，我们面对大量的不同的页面，页面和页面间有相似布局的部分，也有不相似的布局的部分，所以我们如果使用Nuxt3中的布局，可以预先根据不同页面的布局需求写出大致的步聚骨架部分，然后根据业务页面的不同选择不同name的布局。完成使用。