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

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

刚刚从组件在第一对象上删除多余的小号，你应该确定。