Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vue-router : failed to resolve async component render

I am a beginner to vue-router and I can't make it work. When I start my app, I get the following errors :

[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
...

Here are my files : 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
like image 980
Léo Coletta Avatar asked Feb 25 '18 16:02

Léo Coletta


People also ask

What happens after lazy loading in vue router?

After lazy loading, the component loading is abnormal, but we don’t know what the reason is. Friends who know can leave a message there is an error handling function onerror in Vue router, which is used to handle routing exceptions. Please see the description:

What is the error when importing vue-router?

Vue-router error: TypeError: Cannot read property 'matched' of undefined 4 showing Vue is not defined error while importing vue-router 1 Clicking routes in Header refreshes page in vuejs with prerender-spa plugin after serving dist 2

How to handle routing exceptions in vue router?

there is an error handling function onerror in Vue router, which is used to handle routing exceptions. Please see the description: this situation should be consistent with our error situation, because no error will be reported after refreshing the page.

What is an uncaught error in Vue?

An error occurs when trying to parse an asynchronous component. Re render the target page*/ Vue adds route errors dynamically: Uncaught Error… [How to Solve]


1 Answers

There is a typo in routes, change components to component:

export const routes = [
  { name: 'Home', path: '', component: Home }
]
like image 142
Paul Tsai Avatar answered Oct 12 '22 23:10

Paul Tsai