using vue-router cause component does not load and display right

I am using vue-router, and with component. but i found i can not make the component display content right Here is source code:

https://github.com/lolipos/lolipos/tree/master/public/src

The main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import App from './App.vue'

require('es6-promise').polyfill()

Vue.use(VueRouter)
Vue.use(VueResource)
// define routes
const Home = resolve => require(['./components/home.vue'], resolve)
const About = resolve => require(['./components/about.vue'], resolve)
const Asyncdemo = resolve => require(['./components/asyncdemo.vue'], resolve)
const Signin = resolve => require(['./components/signin.vue'], resolve)
const Signup = resolve => require(['./components/signup.vue'], resolve)
const Pagenotfound = resolve => require(['./components/not-found.vue'], resolve)
const routes = [
  {path: '/', component: Home},
  {path: '/about', component: About},
  {path: '/asyncdemo', component: Asyncdemo},
  {path: '/signin', component: Signin},
  {path: '/signup', component: Signup},
  {path: '*', component: Pagenotfound}
]

const router = new VueRouter({
  routes: routes,
  mode: 'history',
  saveScrollPosition: true
})

new Vue(Vue.util.extend({
  router
}, App)).$mount('#app')
window.router = router

The router child which will call a component about.vue

<template>
  <div>
    <p>Not mention</p>
    <p> What the fuck with you</p>
    <div>
      <h2>About us</h2>
      <div>this is template body</div>
      <div>{{ msg }}</div>
      <button @click="showModal = true">Show Modal</button>
    </div>
    <p>hello</p>
    <Modal v-if="showModal" @close="showModal = false"></Modal>
  </div>
</template>
<style></style>
<script>
  import Modal from './modal.vue'
  export default {
    data () {
      return {
        showModal: false,
        msg: 'hello vue'
      }
    },
    component: {
      Modal
    }
  }
</script>

The component which will display a modal, modal.vue

<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <slot name="header">
              default header
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
              default body
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              <button class="modal-default-button" @click="$emit('close')">
                OK
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<style>
</style>
<script>
  export default {
    data: function () {
      return {}
    }
  }
</script>

While visit /about, there be a button. when click the button , i want display a modal. but it not works.

[cnmade]

It is my fault . and i fixed the problem

[jonatajoaquim]

I am new on VueJs and I faced a similar problem maybe. I have a router who assign some endpoints to specific components and those was not being loaded when I accessed the endpoints.

In my case was because in my App.vue (which is the very first component of my application I was not using the <router-view />

After I left my App.vue like this

<template>
  <div id="app">
    <div>
      <img src="./assets/logo.png">
    </div>
    <router-view />
  </div>
</template>

It started to work.

So as I understood, the <router-view /> is responsible to load what is configured in our router configs.

And I realise that throughout this class https://www.youtube.com/watch?v=mY2MiaYiSdw