记一次vue的小问题

刚刚开始学vue，在进行vue的路由设置中出现了以下问题：

我的自定义组件如下：

<template>
  <h1>首页</h1>
</template>

<script>
    export default {
        name: "main"
    }
</script>

<style scoped>

</style>

路由配置如下：

//路由配置

//导入vue
import Vue from 'vue'
//导入router路由
import VueRouter from 'vue-router'

//导入组件所需组件
import Main from '../components/main'
//使用路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
    routes: [
      {
        //路由名字：可要可不要
        name:'Main',
        //路由路径，点击此路径跳转到相应组件
        path: '/main',
        //绑定组件，就是上面所导入的组件
        components: Main
      }

    ]

  }
);

主vue组件（运行后展示的vue组件）：

<template>
  <div id="app">
   <h1>Vue-Router</h1>
    <router-link to="/main">首页</router-link>
    <router-view></router-view>

  </div>
</template>

运行后展示页面：

点击首页会显示最上面图的问题，经过排查，发现是路由router配置里的component误写成了components，导致无法加载。