Vue/ next应用程序在每个页面上渲染两次内容(不是组件，只是内容)

Question

我对Vue/next编程非常陌生，并遵循了"添加博客"的原则。教程，然后我修改了我的网站。这一切都工作完美，除了实际它是渲染内容两次。它呈现NavPage(组件)>内容比;FooterDiv(component)然后是content。见图片:显示重复内容的页面图像

这发生在每一页。

我包括我的blogpage代码，因为在测试中它似乎是问题所在:

<template>
<div>
<div class="home-page">
<h2>Latest Posts</h2>
<div class="articles">
<div class="article" v-for="article of articles" :key="article.slug">
<nuxt-link :to="{ name: 'slug', params: { slug: article.slug } }">
<div class="article-inner">
<img :src="require(`~/assets/resources/${article.img}`)" alt="" />
<div class="detail">
<h3>{{ article.title }}</h3>
<p>{{ article.description }}</p>
</div>
</div>
</nuxt-link>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: "BlogPage",
data() {
return {
name: ''
}
},
mounted() {
let user = localStorage.getItem('user-info');
if (!user) {
this.$router.push({ name: "BlogPage" })
}
},
async asyncData({ $content, params }) {
const articles = await $content('articles', params.slug)
.only(['title', 'description', 'img', 'slug'])
.sortBy('createdAt', 'asc')
.fetch()
return {
articles    
}
}
}

我还包含了Vue根据Vue开发工具渲染的结构这张图片是我在开发工具中看到的，当页面被渲染

我花了几个小时来排除这个问题，但没有找到关于这个问题的其他信息。

谢谢你的帮助，谢谢你对一个新手的耐心。如果您需要查看任何其他代码，请告诉我。

根据要求，这里是我的NavPage组件代码:

<template>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">Denise Pedro</a>
<button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="navbar-brand"> <NuxtLink to="/">Home</NuxtLink></li>
<li class="navbar-brand"> <NuxtLink to="/PortfolioPage">Portfolio</NuxtLink></li>
<li class="navbar-brand"> <NuxtLink to="/ResumePage">Resume</NuxtLink></li>
<li class="navbar-brand">  <NuxtLink to="/ContactPage">Contact</NuxtLink></li>
<li class="navbar-brand">  <NuxtLink to="/BlogPage">Blog</NuxtLink></li>

</ul>
</div>
</div>
</nav>
</template>

和我的FooterDiv组件

<template>

<!-- Footer-->
<footer class="footer text-center">
<div class="container">
<div class="row">
<!-- Footer Location-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Location</h4>
<p class="lead mb-0">
Seattle through Olympia, WA
<br />

</p>
</div>
<!-- Footer Social Icons-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Around the Web</h4>
<!-- <a class="btn btn-outline-light btn-social mx-1" href="#!"><font-awesome-icon icon="fa-brands fa-facebook" /></a> -->
<a class="btn btn-outline-light btn-social mx-1" href="#!"><img src="../assets/img/facebook-brands.svg" alt="facebook icon" /></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><img src="../assets/img/twitter-brands.svg" alt="twitter icon"/></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><img src="../assets/img/linkedin-in-brands.svg" alt="linkedin icon"/></a>
</div>
<!-- Footer About Text-->
<div class="col-lg-4">
<h4 class="text-uppercase mb-4">Denise Pedro</h4>
<p class="lead mb-0">
[e-mail]
<!-- <a href="http://startbootstrap.com">Start Bootstrap</a> -->
</p>
</div>
</div> 
</div>
</footer>
</template>

最后，我的布局代码

<template>
<div>
<NavPage />
<Nuxt />
<FooterDiv />
<Nuxt /> 
</div>
</template>
<script>
import NavPage from '../src/components/NavPage.vue';
import FooterDiv from '../src/components/FooterDiv.vue'
export default {
components: {
NavPage,
FooterDiv
},
}
</script>

谢谢

Answer 1

在你的布局中，你已经把</Nuxt>放了两次，这就是为什么页面内容是重复的，你应该删除它。你的layout.vue应该是这样的:

<template>
<div>
<NavPage />
<Nuxt />
<FooterDiv />
</div>
</template>
<script>
import NavPage from '../src/components/NavPage.vue';
import FooterDiv from '../src/components/FooterDiv.vue'
export default {
components: {
NavPage,
FooterDiv
},
}
</script>