Javascript 无法使用视图路由器解析异步组件呈现

我尝试用VueRouter实现VueJs<代码>主页组件显示的是日志消息，而不是模板部分。我得到了以下错误：

Home.vue

<template>
    <div class="wrap" id="app">
        <h1 class="inline">Hello There</h1>
    </div>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            maps: []
        }
    },
    mounted() {
        console.log( 'Mounted Homepage' );
    }
}
</script>

<style lang="scss">
#app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
</style>

Main.js

import Vue from 'vue';
import Home from './components/Home.vue';
import NotFound from './components/NotFound.vue';

const routes = [
    { name: 'home', path: '/', components: Home },
    { path: '*', component: NotFound, meta: { title: 'Not Found' } }
];

import VueRouter from 'vue-router';
Vue.use(VueRouter);


var router = new VueRouter({
    routes
})

export default router;

import Vue from 'vue'
import NotFound from './components/NotFound.vue'
import router from './routes'

new Vue({
    router,
    components: {
        NotFound
    }
}).$mount('#rgm_app');

---

你能告诉我我错过了什么吗？

你在这个数组声明中有一个输入错误：

const routes = [
    { name: 'home', path: '/', components: Home },
    { path: '*', component: NotFound, meta: { title: 'Not Found' } }
];

---

只需从第一个对象的组件中删除额外的s，您就可以了。

似乎是一个很常见的失误。在

.vue

文件中键入了这么多

组件

，我忍不住在路由器文件中键入另一个

组件

！奇怪的是。。。这也是我的问题，尽管用例和结构完全不同。。。