vue-router 跳转页面问题

Question

我想实现一个登陆成功跳转页面的逻辑，使用了vue-router。
route/index.js ：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/home'
import Login from '../App'
Vue.use(Router)

export default new Router({
  name: 'router',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    }
  ]
})

main.js:

import Vue from 'vue'
import Login from './App'
// import Home from './components/home'
import router from './router/index'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<Login/>',
  components: {Login}
})

跳转逻辑 ：

submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
            this.$router.push('/home')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }

当我点击登陆按钮后，url在后面拼接上了/home，但是页面没有跳转到home.vue组件上
请问这是为什么？我第一次撸VUE，不明白为什么，也查了很多帖子，始终没有解决。

Answer 1

最关键的地方没给出来，组件里怎么写的？

Answer 2

你组件里加了<router-view></router-view>吗

Answer 3

 this.$router.push({path:'/home'})

or

this.$router.push({name:'home'})

Answer 4

我犯了一个低级的错误，我应该将组件都整合到APP.vue中，但是我将App.vue当成一个小组件同其他组件使用了...该死 在App.vue中`<template>
<router-view></router-view>
</template>` 就解决了...