vue-router 跳轉頁面問題

我想實現(xiàn)一個登陸成功跳轉頁面的邏輯，使用了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，不明白為什么，也查了很多帖子，始終沒有解決。