Vue js, footer not displaying - vue.js

Question

I have installed vue cli, when i try to show my navbar(component) it shows but when i try to show my footer(component)it shows.
When i show other cms pages the navbar and footer are together the text is not displaying between...
Find the image, Output:
This is my navbar where it is a component under component folder
<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>
This is my HomePage where it is a component under component folder
<template>
<div>
test
</div>
</template>
<script>
export default {
name: 'HomePage'
}
</script>
This is App.vue Where it is inside the 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>
This the Footer Component
<template>
<div class="hello">
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? Visit the homepage or read our getting started guide.</p>
</div>
</footer>
</div>
</template>
<script>
export default {
name: 'Footer',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

Answer 1

In your App.vue template you have the order of the elements wrong.
Move the <app-footer> below rhe <router-view>:
<template>
<div id="app">
<app-header></app-header>
<router-view></router-view>
<app-footer></app-footer>
</div>
</template