如何防止渲染 Nuxt 3 默认布局？

Question

因为 nuxt 3 docs 是一个 codesandbox 并且没有解释任何东西，根据 nuxt 2 docs default layout 应该替换为 <nuxt-layout> 组件的 name 属性中指定的任何布局，但对我来说这两种布局被渲染。

layouts/default.vue:

<template>
  <div>
    <p>default layout</p>
    <slot/>
  </div>
</template>

layouts/custom.vue:

<template>
  <div>
    <p>custom layout</p>
    <slot/>
  </div>
</template>

pages/index.vue:

<template>
  <nuxt-layout name="custom">
    <p>hello world</p>
  </nuxt-layout>
</template>

如何只在index.vue 中呈现custom 布局？

Answer 1

在页面中，将其添加到您的脚本中。如需更多信息，请访问nuxt3-layouts。

~/pages/dashboard.vue

<script setup>
definePageMeta({
  layout: "dashboard",
});
</script>

~/pages/index.vue

<script setup>
definePageMeta({
  layout: "default",
});
</script>