Vue-router error: TypeError: Cannot read property 'matched' of undefined

cannot read property '$router' of undefined vue
error in render: "typeerror: cannot read property 'matched' of undefined"
cannot read property '_normalized' of undefined vue
[vue warn]: error in render: "typeerror: cannot read property 'matched' of undefined"
cannot read property 'matched' of undefined vue router
typeerror: cannot read property '_normalized' of undefined
typeerror: cannot read property '$router' of undefined
typeerror: cannot read property 'name' of undefined in vue js

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 render function: "TypeError: Cannot read property 'matched' of undefined"

Here is my code:

App.vue

<template>
  <div>
    <h2>Links</h2>
    <ul>
      <router-link to='/'>Home</router-link>
      <router-link to='/query'>Query</router-link>

      <router-view></router-view>
    </ul>
  </div>
</template>

<script>
    export default {}
</script>

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
import routes from './routes.js'
import App from './App.vue'

const app = new Vue({
  el: '#app',
  routes,
  render: h => h(App)
})

routes.js

import VueRouter from 'vue-router';
let routes=[
  {
    path: '/',
    component: require('./Components/Home.vue')
  },
  {
    path: '/query',
    component: require('./Components/Query.vue')
  }
];

export default new VueRouter({routes});

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

import router from './routes.js'

const app = new Vue({
  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 = new Vue({
  el: '#app',
  router: routes,
  render: h => h(App)
})

"Cannot read property 'name' of undefined" – vue-router works as , If there is a <router-link> component on the page, the error (referenced above) appears. If I use this.$router.push() there are no issues. The  Vue-router error: TypeError: Cannot read property 'matched' of undefined 0 How to manage authentication of a user through a vue router and a server-provided JWT token?

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 = new Vue({
    el: '#app',
    router
});

Vue-router error: TypeError: Cannot read property 'matched' of , The name when you add it to Vue must be router . import router from './routes.js' const app = new Vue({ el: '#app', router, render: h => h(App) }). I have been dealing with an issue using Vue, Vuex and Vue-Router. I'm building a flash cards app, fetching all the cards on main app creation, then using a Vuex getter to get each card by its id wh

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 {}!

Uncaught TypeError: Cannot read property 'matched' of undefined, vue components, I noticed right away they're inspired by Elm which I think is fantastic. So in these components I'm trying to set up routing: main.js import Vue from '  Uncaught TypeError: Cannot read property 'lat' of undefined Leaflet and VueJS 0 Trying to push data to an array from a child component in vue.js but get TypeError: Cannot read property 'push' of undefined"

Router in Plugin: Error in render: "TypeError: Cannot read property , Hey guys! Thanks so much for all your help on this forum - it helps all the time. (​Special thanks to @LinusBorg - so many of your vue-router  Browse other questions tagged javascript authentication vue.js vue-router or ask your own question. The Overflow Blog This week, #StackOverflowKnows molecule rings, infected laptops, and HMAC limits

<RouterLink> Cannot read property 'resolve', what it's mean? Error in render: "TypeError: Cannot read property 'resolve' of undefined" found in ---> <RouterLink>. app,js import VueRouter from 'vue-router';​  Vue-router error: TypeError: Cannot read property 'matched' of undefined. 106. Vuejs: Event on route change. 8. vue router Cannot read property 'push' of

Using vue-router gives “Cannot find element #app” and “TypeError , npm start. Running this throws NO error npm build. Here is the exact error. Vue.js error TypeError: Cannot read property 'path' of undefined at VueRouter.match  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Comments
  • I would give you 10 stars if I could. I was on a tutorial and it didn't say that we must use router as the variable name. I was using Router.
  • It take long time to research. Thanks!
  • Yeh the official documentation getting started guide does not work, this answer does.
  • When adding an answer, please try to explain what is actually causing the issue rather than just posting a possible fix where the user can guess what was actually causing it. The accepted answer already explains the actual cause of the issue with the related code on how to fix the issue. Your answer did not add any value to the question in my opinion.
  • You rocks!. I was using {} in my import statement . Spend almost one day to find the issus. Thank you :)
  • @GaneshSreeju you're welcome! 😀