Question

我有一个带有一些嵌套组件的vue项目。现在，我有一个主要的“ app-home”组件，其中已导入了其他组件。但是，主应用程序组件显示2个版本的“ app-home”。其他嵌套组件都不会在home组件内重复。

就我现在刚刚构建结构而言，这是一个非常基本的项目。我不会在应用程序组件中重复标记。

app.vue：

<template>
  <div id="app">
    <app-home></app-home>
    <router-view/>
  </div>
</template>

<script>
  import AppHome from './components/AppHome.vue'

  export default {
    components: {
      'app-home': AppHome
    }
  }
</script>

<style>

</style>

apphome.vue：

<template>
  <div class="page-container">
    <h1>{{ msg }}</h1>
    <app-toolbar></app-toolbar>
    <app-nav></app-nav>
  </div>
</template>

<script>
  import AppToolbar from './AppToolbar.vue'
  import AppNav from './AppNav.vue'

  export default {
    components: {
      'app-toolbar': AppToolbar,
      'app-nav': AppNav
    },
    title: 'githubrater',
    data () {
      return {
        msg: 'app home works'
      }
    }
  }
</script>

由于某些原因，当我查看浏览器时，整个app-home组件会显示两次。我在App.vue中正在做任何会导致这种情况的事情吗？

谢谢

Answer 1

它是在您的app-home组件声明中首次呈现的。

<app-home></app-home>

第二次是：

您还添加了router-view，因此它将在您的router-view元素中呈现您的app-home组件，就像您最有可能在路由“ /”上声明了app-home一样。因此，删除app-home组件声明，并让路由器呈现您的app-home组件。

主页组件在浏览器中重复

1 个答案: