前言
大家好，我是村长，欢迎关注我的公众号村长学前端和B站Young村长！
上一篇写了nuxt3路由系统，我们试用了两个重要功能：动态路由和嵌套路由。
体验便捷的同时，当然也会有另一些重要需求，比如评论区小伙伴提出的：别名、重定向和路由守卫等需求，我考查了v2中的可用方案：
- router-extras-module 在页面中自定义路由参数
- @nuxtjs/router 覆盖Nuxt路由并编写自己的
router.js 文件- 在配置文件
nuxt.config.js中使用router.extendRoutes 选项经测试已经全部失效了！所以小伙伴们需要等以上两个扩展更新，或者你多投几个币，我教你咋写: )
这一篇我们研究一下nuxt的布局系统，通过这个自定义的布局页，我们可以提取一些通用UI或代码到可重用的布局组件中，提高代码复用性，非常便捷高效，下面我们开始吧！
默认布局
那些放在layouts/目录下的SFC会被自动加载进来，如果我们创建的SFC名为default.vue，将会被用于项目所有页面中作为布局模板。
layouts/default.vue：
<template>
<div>
通用布局页，default.vue:
<slot />
</div>
</template>
效果如下：可见还是嵌套在app.vue中
image-20211107104358408
自定义布局文件
如果我们的布局文件名不叫default，而是别的，比如custom.vue，想要使用它们，就必须在某个页面中设置页面属性layout。
custom.vue：
<template>
<div>
内容来自自定义布局页custom.vue！
<slot />
</div>
</template>
可以在helloworld.vue中试试custom这个布局，helloworld.vue：
<script>
export default {
layout: "custom"
}
</script>
试了一下，嵌套路由中是没有效果的，这可能是有意为之的
使用NuxtLayout
可以使用NuxtLayout组件结合slots获得完全控制力，同时需要设置组件选项layout: false。
helloworld.vue
<template>
<NuxtLayout name="custom">
<template #header>
<h1>hello page</h1>
</template>
some content...
</NuxtLayout>
</template>
<script>
export default {
layout: false,
};
</script>
修改一下custom.vue
<template>
<div>
内容来自自定义布局页custom.vue！
<slot name="header"/>
<slot />
</div>
</template>
我们甚至能组合多个布局页：
<template>
<div>
<NuxtLayout name="custom">
<template #header>
<h1>hello page</h1>
</template>
some content...
</NuxtLayout>
<NuxtLayout name="default">
some content...
</NuxtLayout>
</div>
</template>
效果如下：
配合<script setup>一起使用
由于需要设置layout选项，所以在这个script标签旁边同时使用<script setup>标签，它们都能生效。
<script>
export default {
layout: "custom",
};
</script>
<script setup>
// your setup script
</script>
下次预告
我估计大家应该挺烦每次使用组件时的各种导入和注册操作，这点nuxt中早就解决了，用就完了！下篇文章我们将演示其中的细节，欢迎大家关注！
写在最后
本系列文章有配套视频，感兴趣的小伙伴可以前往观看：
- 【Nuxt3从入门到实战】第一啪：尝鲜Nuxt3，尤大力推的Vue3框架到底怎么样？
- 【Nuxt3从入门到实战】第二啪：约定路由，用起来可真爽啊！