vue-router设置路由的时候界面没有显示

Question

反正打开界面以后没有任何东西显示，console里面也没有报错之类的，我就直接上代码吧！我的是webpack的vue-cli生成的模板
首先是App.vue

    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          factor: window.location.hash.slice(2)
        }
      },
      methods: {
        new_route: function (url) {
          console.log(url)
          this.$emit('abc', url)
        }
      }
    }
    </script>
    
    <style scoped>
    #app {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
    }
    </style>
    

然后是main.js文件

   import Vue from 'vue'
    import App from './App'
    import VueResource from 'vue-resource'
    import VueRouter from 'vue-router'
    import router from './router.js'
    
    // import MyHome from './pages/MyHome'
    
    /* eslint-disable no-new */
    Vue.use(VueRouter)
    Vue.use(VueResource)
    
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      router
    })

然后是router.js文件

import VueRouter from 'vue-router'
import MyHome from './pages/MyHome'
// import NotFound from './pages/NotFound'
import MyLogInPage from './pages/MyLogInPage'

const routes = [{
  name: 'home', path: '/home', component: MyHome
}, {
  name: 'login', path: '/', component: MyLogInPage
}]
const router = new VueRouter(
  routes
)
export default router

然后是我的初始界面

 <templat>
  <div class="top">
    <div  class="topTitle">
      <img  src="../assets/logo.png"/>
      <h1>{{ myHeaderTitle }}</h1>
    </div>
    <p>{{ myHeaderMsg }}</p>
  </div>
  <div class="myContent">
    <img id="myContentLeftImg" src="../assets/home_bg.png"/>
    <div class="myContentRight">
      <my-login ></my-login>
      <div class="myWechat">
        <img src="../assets/property_app.png"/>
        <p>{{ myWechatMsg }}</p>
      </div>
    </div>
  </div>
  <div class="myFooter">
    <p>{{ myFooterMsg1 }}</p><a :href="myFooterLink" target="_blank">{{ myFooterMsg2 }}</a>
  </div>
</templat>

<script>
import MyLogin from 'components/MyLogin'
export default {
  name: 'my-loginpage',
  component: {
    MyLogin
  },
  data () {
    return {
    
    }
  }
}
</script>

   sytle文件由于太多所以没有粘过来  
    求大神指点啊

Answer 1

vue-router 要用 router-link 自定义元素，没看到代码中有放置

Answer 2

没有匹配到路径

Answer 3

Answer 4

请问是如何解决的，我也出现了同样的问题