Vue js，页脚不显示

Question

我已经安装了 vue cli，当我尝试显示我的导航栏（组件）时它会显示，但是当我尝试显示我的页脚（组件）时它会显示。 当我显示其他 cms 页面时，导航栏和页脚在一起，文本不会显示在... 找到图像，输出： 这是我的导航栏，它是组件文件夹下的一个组件

<template>
        <div>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <router-link to="/" class="nav-link">Home</router-link>
                </li>
                <li class="nav-item">
                    <router-link to="/contacts" class="nav-link">Contacts Us</router-link>
                </li>
                <li class="nav-item">
                    <router-link to="/login" class="nav-link">Login</router-link>
                </li>
            </ul>
        </div>
</template>
<script>
   export default {
      name: 'Navbar'
    }
</script>

这是我的主页，它是组件文件夹下的一个组件

<template>
    <div>
        test
    </div>
</template>
<script>
    export default {
    name: 'HomePage'
    }
</script>

这是 App.vue 里面的 Src/ 文件夹

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

<script>
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
export default {
  name: 'App',
  components: {
    'app-header': Navbar,
     'app-footer' : Footer
  }
}
</script>

这是页脚组件

<template>
  <div class="hello">
    <footer class="text-muted">
      <div class="container">
        <p class="float-right">
          <a href="#">Back to top</a>
        </p>
        <p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
        <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Answer 1

在您的 App.vue 模板中，您的元素顺序错误。

将<app-footer>移动到<router-view>下方：

<template>
  <div id="app">
    <app-header></app-header>

    <router-view></router-view>

    <app-footer></app-footer>
  </div>
</template