VUE/NUXT应用程序在每个页面上渲染内容（不是组件，只是内容）

Question

我是VUE/NUXT编程的新手，并遵循了一个“添加博客”教程，然后对我的网站进行了修改。除了实际渲染内容两次之外，一切都可以很好地工作。它渲染 NAVPAGE（组件）＆GT;内容＆gt; footerDiv（组件）然后再次满足。请参阅图像： 页面显示重复内容的图像

这在每个页面上发生。

我在测试中包括我的博客页面代码ecasue，这似乎是问题所在的地方：

 <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 Dev Tools所呈现的结构 当页面呈现时，我在开发工具中看到的是我在渲染的开发工具中看到的

这，找不到有关此问题的其他信息。

感谢您的任何帮助，以及您对新手的耐心。让我知道您是否需要查看任何其他代码。

按照这里的要求是我的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">
                           [email protected]
                            <!-- <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

在您的布局中，您已将＆lt;/nuxt＆gt;两次放置，这就是为什么重复页面内容的原因，应该将其删除。
您的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>