Question

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

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

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>

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

1 个答案: