Домашний компонент повторяется в браузере

Question

У меня есть проект VUE с некоторыми вложенными компонентами.Прямо сейчас у меня есть основной компонент app-home с другими компонентами, импортированными в него.Основной компонент приложения, однако, отображает 2 версии «app-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.vue, что могло бы вызвать это?

Спасибо

Answer 1

Он отображается в первый раз из объявления компонента app-home.

<app-home></app-home>

И второй раз как:

Вы также добавили представление маршрутизатора и, следовательно, оно будет отображать ваше приложение-home компонент в вашем элементе router-view, так как вы, скорее всего, объявили бы app-home на маршруте '/'.Поэтому удалите объявление компонента app-home и позвольте маршрутизатору визуализировать ваш компонент app-home.