布局是围绕包含多个页面的公共用户界面的页面的包装器,例如页眉和页脚显示。布局是使用<slot />组件显示页面内容的Vue文件。默认情况下使用layouts/default.vue文件。自定义布局可以设置为页面元数据的一部分。
但是一种布局显然是不太够的,在我们需要使用多种布局的时候就需要别的布局组件
非常简单:
在layouts中创建自定义的布局文件 custom.vue
<template>
<div>
<h2>custom</h2>
<slot />
</div>
</template>
然后在pages中创建一个.vue 文件,我这儿是 custom.vue
<template>
<div>
自定义layout
</div>
</template>
<script>
definePageMeta({
layout: "custom", // 指定布局,也就是 layouts/custom.vue 文件,将会把当前组件传给 slot
});
</script>
直接访问http://localhost:3000/custom,给我出来