如何阻止Nuxt 3默认布局渲染？单组件多布局实现求助

问题原因 #

Nuxt3 默认会自动给所有页面套上 default 布局，当你在页面内使用 <nuxt-layout name="custom"> 时，相当于在默认布局内部又嵌套了自定义布局，所以才会出现两个布局同时渲染的情况。

解决方案 #

在页面的 definePageMeta 中先禁用默认布局的自动渲染，之后再通过 <nuxt-layout> 标签指定需要的布局即可：

<script setup>
// 禁用页面默认的布局自动应用
definePageMeta({
  layout: false
})
</script>

<template>
  <!-- 直接渲染指定的自定义布局 -->
  <nuxt-layout name="custom">
    <h1>这是使用custom布局的页面内容</h1>
  </nuxt-layout>

  <!-- 也可以根据变量动态切换布局 -->
  <!-- <nuxt-layout :name="activeLayout">
    <h1>动态切换布局的内容</h1>
  </nuxt-layout> -->
</template>

说明 #

设置 layout: false 后，Nuxt 不会再自动给页面套入 default 布局，此时页面内的 <nuxt-layout> 标签会直接渲染你指定的布局，不会出现嵌套问题。如果需要在同一个页面内切换多种布局，只需要动态绑定 name 属性或者用 v-if 控制不同 <nuxt-layout> 的显示即可。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov