Vue <router-view/> 两次加载头部组件

Question

我正在构建一个简单的 vue 应用程序，我遇到了一个奇怪的问题，我的标签中的组件在标签内第二次呈现。

最初，和组件不在标题标签中，但它们出现在组件下方。

App.vue

<template>
  <div id="app">
    <header><app-logo/><nav-bar/></header>
    <section class="container">
    <router-view/>
    </section>
  </div>
</template>
<script>
import AppLogo from './components/AppLogo.vue'
import Home from './components/Home.vue'
export default {
  name: 'App',
  components: {
    Home,
    AppLogo
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}
.links {
  padding-top: 15px;
}
</style>

导航栏组件：

<template>
    <div>
        <h1> TFJS/Vue Examples </h1>
        <div v-for="page in pages" v-bind:key="page">
            <div>
                <div>
                    <router-link to='/basic-logistic-regression'> {{ page }} </router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pages: ['/BasicLogisticRegression']
        }
    }
}
</script>

我想让导航栏组件始终出现在路由器视图上方。

Answer 1

我通过使用名为 loadHome() 的挂载方法解决了这个问题，该方法使用 this.$router.push('/home') 以编程方式强制路由器视图加载主页组件。

这里是代码

App.vue

<template>
  <div id="app">
    <div class="routing">
      <header><app-logo/><nav-bar/></header>
    </div>
    <section class="container">
    <router-view/>
    </section>
  </div>
</template>

<script>
import AppLogo from './components/AppLogo.vue'
import NavBar from './components/NavBar.vue'
import Home from './components/Home.vue'

export default {
  name: 'App',
  components: {
    Home,
    AppLogo,
    NavBar
  },
  methods: {
    loadHome: function(){
      this.$router.push('/home')
    }
  },
  mounted: function(){
    this.loadHome()
  }
}
</script>