Nuxt 3 自定义布局显示选择了无效布局答案

【问题标题】：Nuxt 3 custom layout shows Invalid layout selectedNuxt 3 自定义布局显示选择了无效布局
【发布时间】：2022-01-23 15:11:22
【问题描述】：

我正在尝试在 Nuxt 3 项目中添加自定义布局，但该布局不起作用，并且控制台显示以下消息：

选择了无效的布局 test_layout

没有其他错误。

这是我尝试过的代码：

-| layouts/
 ---| test_layout.vue
-| pages/
 ---| blog/index.vue

<template>
  <div>
    My Test Layout Header
    <slot />
  </div>
</template>
<script>
export default {
  name: "test_layout"
}
</script>

<template>
  <div>
    <p>My Blog Title</p>
  </div>
</template>

<script>
export default {
  layout:"test_layout",
  name: "blog",
}
</script>

我尝试过<Nuxt/> 而不是<slot />，但它不起作用。

【问题讨论】：

【解决方案1】：

Nuxt 3 似乎将文件名的下划线替换为连字符，因此布局应指定为test-layout:

// blog/index.vue
export default {
  // layout: 'test_layout', // ❌ replace underscore with hyphen

  layout: 'test-layout', // ✅
}

这个wasn't an issue in Nuxt 2，它使用确切的文件名作为布局名称（包括下划线）。我也没有看到任何关于此的文档。我已经报告了issue 以获得一些澄清。

【讨论】：

【解决方案2】：

从您的布局文件中删除以下代码。这可能有效。

<script>
    export default {
      name: "test_layout"
    }
</script>

【讨论】：