NuxtLayout
<NuxtLayout /> 可用于覆盖 app.vue、error.vue 甚至位于 /pages 目录中的页面组件上的 default 布局。
/app.vue
vue
<template>
<NuxtLayout>
some page content
</NuxtLayout>
</template>
name prop
<NuxtLayout /> 组件接受 name 属性，您可以传递该属性以使用非默认布局，其中 name 可以是静态字符串、反应性引用或计算属性。
它必须匹配/layouts目录中相应布局文件的名称。
示例
pages/index.vue
vue
<script setup>
// layouts/custom.vue
const layout = 'custom'
</script>
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
请注意，布局名称已规范化为 kebab-case，因此如果您的布局文件名为 errorLayout.vue，当作为 name 属性传递给 <NuxtLayout /> 时，它将变为 error-layout。
/error.vue
vue
<template>
<NuxtLayout name="error-layout">
<NuxtPage />
</NuxtLayout>
</template>
布局和过渡
<NuxtLayout /> 通过 <slot /> 呈现传入的内容，然后包裹在 Vue 的 <Transition /> 组件周围以激活布局转换。
为使其按预期工作，建议<NuxtLayout /> 不是页面组件的根元素。
pages/index.vue
vue
<template>
<div>
<NuxtLayout name="custom">
<template #header>
一些标题模板内容。
</template>
</NuxtLayout>
</div>
</template>