使用 NuxtJs 3 时，无法识别布局文件夹中的 deafult.vue 中的插槽命令

Question

我对此还很陌生，所以问题可能就像打字错误一样愚蠢，但我和 chatgpt 都还没有弄清楚。我正在学习一个关于 Nuxt Js 的速成课程，其中创建该课程的人表明，例如，为了制作一个将为每个页面显示的导航栏（带有 ul 和 li 的导航栏），您需要创建一个布局文件夹，比你创建一个 default.vue 文件。我会像平常一样编写标题代码，并以 和一些 css 结尾。但是，我的导航没有显示在不同的页面中。

这是我想要关注的视频链接：https://www.youtube.com/watch?v=LZDQhOaBBbk，我卡住的部分大约是 1:55。

这是我的 deafult.vue 中的完整代码，位于我的布局文件夹中：

<template>
    <div>
        <header>
            <nav>
                <NuxtLink to="/">Nuxt Dojo</NuxtLink>
                <ul>
                    <li><NuxtLink to="/">Home</NuxtLink></li>
                    <li><NuxtLink to="/about">About</NuxtLink></li>
                    <li><NuxtLink to="/products">Products</NuxtLink></li>
                </ul>
            </nav>
        </header>
    <!--- output page content --->
    <div>
        <slot /> <!-- this is how nuxt sees where the page content is going to go, inside of the layout folder -->
        <p>if you see this the slot is rendering!</p>
    </div>
    </div>
</template>



<style  scoped>
.router-link-exact-active {
    color: rgb(72, 193, 153); /* This is a class for the link we are currently one, so it colors the link we are currently on a little bit differently */
}

</style>

这是我的index.vue 的代码，它位于我的页面文件夹中：

<template>
    <div> 
    <h2>Home</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem voluptate rerum ipsa natus, deserunt nobis delectus architecto ad excepturi, vel perferendis ipsum officiis obcaecati, iusto nam officia. Officiis, assumenda dicta!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem voluptate rerum ipsa natus, deserunt nobis delectus architecto ad excepturi, vel perferendis ipsum officiis obcaecati, iusto nam officia. Officiis, assumenda dicta!</p>

    </div>
</template>

<script setup>



</script>

<style scoped>
h2 {
    margin-bottom: 20px;
    font-size: 36px;
}
p{
    margin: 20px 0;
}
</style>what i am trying to achieve

为了更好的比较，这里是我想要实现的视频的屏幕截图：
在此输入图片描述

以及我所得到的图像：
我得到了什么

总结一下：我试图在我的页面之间添加一种“导航”，通过使用 显示所有页面（index.vue 和 about.vue），但它没有显示在我的页面上。

添加到这篇文章，因为我意识到如果我提供更多背景信息，我可能会让你的生活更轻松，以下是我试图找出问题所在的一些事情：

-我重建了我的项目
-我添加了 console.log 来尝试查看我的默认布局是否正在渲染（控制台中没有记录任何内容）
-我将其添加到我的index.vue和about.vue中：

<script setup>
definePageMeta({
    layout: 'default'
})
</script>

-我尝试通过在插槽命令下放置一段来调试渲染：

<div>
    <slot />
    <p>If you see this, the slot is rendering!</p>
</div>

为了以防万一，这是我的 nuxt.config.ts 文件：

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
/*   devtools: { enabled: true } */
pages: true,
components: true,

modules: [],
})

Answer 1

假设您的组件正确命名为

default.vue

，位于根

layouts/

文件夹中。

在 Nuxt 3 中，通过在

<NuxtLayout>

级别使用包装

app.vue

标签来启用布局。 请参阅文档：Nuxt：启用布局

确保您的

app.vue

看起来像：

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

这应该使您的

default.vue

布局正确地包裹您的页面内容。 另外，由于它是默认设置，因此您不必像在

definePageMeta

中那样在页面级别指定布局。

希望有帮助！