vue-router：无法解析异步组件渲染

Posted 2023-02-22

【中文标题】vue-router：无法解析异步组件渲染

【英文标题】：vue-router : failed to resolve async component render

【发布时间】：2018-08-05 03:36:53

【问题描述】：

我是 vue-router 的初学者，我无法让它工作。当我启动我的应用程序时，我收到以下错误：

[vue-router] Failed to resolve async component render: TypeError: _vm is undefined
49:16:39
[vue-router] uncaught error during route navigation:
49:16:39
TypeError: _vm is undefined
Stack trace:
render@webpack-internal:///63:3:7
resolveAsyncComponents/</<@webpack-internal:///49:1774:17
flatMapComponents/</<@webpack-internal:///49:1801:66
...

这是我的文件：main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routes.js'
import 'bootstrap'

new Vue(
  el: '#app',
  router,
  render: h => h(App)
)

routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './Home.vue'

export const routes = [
   name: 'Home', path: '', components: Home 
]

Vue.use(VueRouter)

const router = new VueRouter(
  routes
)

export default router

【问题讨论】：

显示App.vue.

【参考方案1】：

routes有错别字，换组件为组件：

export const routes = [
   name: 'Home', path: '', component: Home 
]