本文是在基于上篇页面路由（一）、页面路由（二）、文章的基础上进行的，关于路由不会过多讲诉。
我们日常开发中，布局页面多种多样，在nuxt3中我们如何来定制一个布局呢？nuxt为我们提供了一个自定义的布局系统，用户可以定制不同的布局页面。
默认布局
在nuxt的约定下：只要用户在layouts/下编写布局页面，它将会被自动导入进应用程序。默认的情况下如果用户编写的布局文件的文件名是default.vue，那么它将会被默认应用到全局中。
布局通常与<slot/>一同使用，nuxt在加载布局文件后，<slot/>将会默认加载pages目录下的页面
- 新建一个
default.vue的布局文件
<template>
<div>
<div style="border: 1px solid #000">
<h1>公共内容部分</h1>
<NuxtLink to="/test">test</NuxtLink> | <NuxtLink to="/">根</NuxtLink> |
<NuxtLink to="/parent-1">嵌套路由页面</NuxtLink>
</div>
<slot />
</div>
</template>
app.vue文件
<template>
<div>
<NuxtPage></NuxtPage>
</div>
</template>
-
自己随便在
pages目录下新建.vue页面文件 -
目录结构如下
|--layout/
|--|--default.vue
|--pages/
|--|--test.vue
|--|--...
|--app.vue
- 运行展示
自定义布局
你可以自己随意命名布局的名称，在你需要的页面去使用它。
layouts下新建一个布局文件，我这里创建一个custom.vue（命名随意）
<template>
<div>
<h1>这是custom布局</h1>
<slot />
</div>
</template>
- 只要在需要使用的页面设置
layout:布局名你就可以使用此布局
<template>
<div >
<h1>我是custom布局的页面</h1>
</div>
</template>
<script>
export default {
layout: 'custom',
};
</script>
- 运行如下
具名插槽
你也可以在给布局文件中的<slot/>加上具体的命名，然后在你的页面中直接使用即可
default.vue中新增一个具名插槽
<template>
<div>
<div style="border: 1px solid #000">
<h1>公共内容部分</h1>
<NuxtLink to="/test">test</NuxtLink> | <NuxtLink to="/">根</NuxtLink> |
<NuxtLink to="/parent-1">嵌套路由页面</NuxtLink>
</div>
<slot/>
<slot name="test"/> <!--新增 -->
</div>
</template>
- 在需要的页面使用此插槽即可
<template>
<div>
<div slot="default">
<h1>我是default插槽内容部分</h1>
</div>
<div slot="test">
<h1>我是test插槽的内容部分</h1>
</div>
</div>
</template>
- 页面如下
<NuxtLayout>
你也可以设置layout: false来关闭加载默认布局，采用 <NuxtLayout><NuxtLayout/>来加载布局
<template>
<NuxtLayout>
<template #default>
<h1>我是default插槽内容部分</h1>
</template>
<template #test>
<h1>我是test插槽的内容部分</h1>
</template>
</NuxtLayout>
</template>
<script>
export default {
layout: false, //关闭默认布局的加载
};
</script>
与<script stup> 共用
如果你同时想要采用<script>设置你的布局选项和使用vue3提供的<script stup>，那么你可以两种方式一起写他们是不会发生冲突的。
