文章统计:136字,预计阅读:小于一分钟。

nuxt.js 3 layout 通用布局

默认布局

利用NuxtLayout传入插槽来设置整体通用布局

  1. 创建layouts\default.vue文件
<template>
  <div>
    通用布局页,default.vue:
    <slot />
  </div>
</template>
  1. 修改app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

自定义布局

  1. 创建layouts\custem.vue
<template>
  <div>
    自定义布局页,custom.vue:
    <slot />
  </div>
</template>
  1. pages\某个页面.vue
<template>
  <NuxtLayout name="custom">
    <div>测试页面</div>
  </NuxtLayout>
</template>

<script setup>
definePageMeta({
  layout: false, // 禁用 default 布局
});
</script>

以上都是利用插槽传入,在定义布局容器时可以传入命名插槽。

最后更新时间:
贡献者: tomiaa