ビュールータで非同期コンポーネントレンダリングを解決できませんでした

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' } } 
]; 

だけコンポーネントの最初のオブジェクトにから余分なのを削除し、[OK]をする必要があります。