Nuxt 3自定义布局显示选择的布局无效

Question

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

选择的布局 test_layout 无效

没有其他错误。

这是我尝试过的代码：

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

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

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

我已经尝试<Nuxt/>代替<slot />，但它不起作用。

Answer 1

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

\n

// blog/index.vue\nexport default {\n  // layout: \'test_layout\', // \xe2\x9d\x8c replace underscore with hyphen\n\n  layout: \'test-layout\', // \xe2\x9c\x85\n}\n

\n

演示

\n

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

\n