Vue-router Error: Typeerror: Cannot Read Property 'matched' Of Undefined

I'm trying to write my first Vuejs app. I'm using vue-cli and simple-webpack boilerplate. When I add vue-router links to my app component I get this error in console Error in rend

Solution 1:

The name when you add it to Vue must be router.

import router from'./routes.js'const app = newVue({
  el: '#app',
  router,
  render: h =>h(App)
})

If, for whatever reason, you want to call the variable routes you could assign it this way.

import routes from'./routes.js'const app = newVue({
  el: '#app',
  router: routes,
  render: h =>h(App)
})

Solution 2:

vue & vue router & match bug & solution

match bugs

solution

name must be router

https://stackoverflow.com/a/44618867/5934465

OK

---

import default module bug

import default module no need {}!

Solution 3:

On my Vue file I had the following code:

Then, I modified my app.js file, and place the following code:

import router from'./Router/router.js'const app = newVue({
    el: '#app',
    router
});

Solution 4:

Adding to this, if you are putting the routes in the same page instead of importing it, It must be declared before the Vue component render.

Like this:-

const router = newVueRouter({
  mode: 'history',
  routes:[
    { path: '/dashboard', component: Dashboard},
    { path: '/signin', component: Signin}
  ]
});

newVue({
  el: '#app',
  router,
  render: h =>h(App)
})

Not like this :

newVue({
  el: '#app',
  router,
  render: h =>h(App)
})

const router = newVueRouter({
  mode: 'history',
  routes:[
    { path: '/dashboard', component: Dashboard},
    { path: '/signin', component: Signin}
  ]
});

Solution 5:

Just to add my typo that caused this. I forgot the {} on the import

import { router } from'./routes.js'//correctimport router from'./routes.js'//causes same error