vue.js - Nuxt 3 自定义布局显示选择了无效布局

Question

我正在尝试在 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 />，但它不起作用。

score 3 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

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

2 回答 2