无法使用视图路由器解析异步组件渲染

Question

我尝试使用 VueRouter 实现 VueJs。 Home 组件显示日志消息，但不显示模板部分。我收到以下错误：

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>

routes.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;

Main.js

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

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

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

Answer 1

你在这个数组声明中有一个错字：

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

只需从第一个对象的 components 中删除多余的 s，就可以了。