vue-router报错'component' of undefined

Question

用vue-cli做的脚手架。

这是main.js

import Vue from 'vue'
import Router from 'vue-router'

//install router
Vue.use(Router)

import App from './components/App.vue'
import login from './components/login.vue'

var router = new Router()


// console.log(App)

// var App = Vue.extend({})

router.map({//定义路由映射
    '/index':{//访问地址
        component:App//引用的组件名称，对应上面使用`import`导入的组件
    },
    '/list': {
        component: login
    }
});

router.redirect({//定义全局的重定向规则。全局的重定向会在匹配当前路径之前执行。
    '*':"/index"//重定向任意未匹配路径到/index
});

router.start(App, '#app')

app.vue

<template>
<div id="app">
    <img src="../assets/logo.png">
    <h1>{{ msg }}</h1>
    <a v-link="{ name: 'list' }">v-link查看列表</a>
    <a v-link="{ name: 'index' }">回去主页</a>
    <router-view class="view"
      keep-alive
      transitionapp
      transition-mode="out-in"></router-view>
</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello'
    }
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

跑的时候报错

求大神解答，在github也找了很多实例，都照着写了，还是有问题。

Answer 1

<a v-link="{ name: 'list' }">v-link查看列表</a>
v-link不要用 name，因为你没有给路由项命名，直接v-link="/list"。

若要使用 name，则：

'/index':{
    name: 'index'
    component: App
},

Answer 2

demo 拿走不谢 https://github.com/TIGERB/eas...

Answer 3

看报错像是App，或者login没引入进来吧

Answer 4

用Vue-Cli构建的项目请确认你的Vue的版本，如果为2.X，那么vue-router请使用2.0以上版本，刚刚看文档才发现这么一个坑

Answer 5

component: App

是什么鬼？去掉