nuxt3 layouts配置使用 2023年8月11日

255 阅读1分钟

布局是围绕包含多个页面的公共用户界面的页面的包装器,例如页眉和页脚显示。布局是使用<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,给我出来

image.png