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>

这是我的HomePage，它是组件文件夹

下的一个组件

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

这是App.vue，它位于Src / Folder

中

<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

Vue js，页脚没有显示

1 个答案: