Javascript Vue<；路由器视图/>；加载收割台组件两次

我正在构建一个简单的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>

从“./components/AppLogo.vue”导入AppLogo
从“./components/Home.vue”导入主页
导出默认值{
名称：“应用程序”，
组成部分：{
家，
阿普洛戈
}
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}
.集装箱{
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
}
.头衔{
字体系列：“Quicksand”、“Source Sans Pro”—苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、“Helvetica Neue”、Arial、无衬线字体；/*1*/
显示：块；
字体大小：300；
字体大小：100px；
颜色：35495e；
字母间距：1px；
}
.副标题{
字体大小：300；
字体大小：42px；
颜色：#526488；
字距：5px；
垫底：15px；
}
.链接{
填充顶部：15px；
}

导航条组件：

<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>

TFJS/Vue示例
{{page}
导出默认值{
数据（）{
返回{
页面：['/BasicLogisticRegression']
}
}
}

---

我希望导航栏组件始终显示在路由器视图上方。

我通过使用名为loadHome（）的挂载方法解决了此问题，该方法使用此。$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>

从“./components/AppLogo.vue”导入AppLogo
从“./components/NavBar.vue”导入导航栏
从“./components/Home.vue”导入主页
导出默认值{
名称：“应用程序”，
组成部分：{
家，
阿普洛戈，
导航条
},
方法：{
loadHome:函数（）{
此。$router.push（“/home”）
}
},
挂载：函数（）{
这是loadHome（）
}
}

你能分享你的

脚本

标签和

标题

组件吗？我甚至还没有建立导航栏，它只是一个链接列表，我这样做主要是为了试验tf.js和d3，但我对vue感兴趣，认为它对我的想法很好。最终，这个问题完全可以避免。路由器应该自动告诉路由器视图加载该路由的页面。我的路由器一定是坏了。我从头重做了这个，它工作得很好。