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

Question

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});

Bert · Accepted Answer · 2017-06-18 19:44:16Z

100

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)
})

answered Jun 18, 2017 at 19:44

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor Leal Over a year ago

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.

Marc Over a year ago

Yeh the official documentation getting started guide does not work, this answer does.

Hugo Ramirez · Accepted Answer · 2018-05-12 13:38:12Z

2

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
});

answered May 12, 2018 at 13:38

Hugo Ramirez

4964 silver badges6 bronze badges

1 Comment

Nrzonline Over a year ago

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.

xgqfrms · Accepted Answer · 2019-05-30 08:50:12Z

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

edited May 30, 2019 at 8:50

answered May 30, 2019 at 8:42

xgqfrms

12.4k1 gold badge81 silver badges73 bronze badges

Comments

Sanjay Jha · Accepted Answer · 2020-06-10 05:53:39Z

0

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 = new VueRouter({
  mode: 'history',
  routes:[
    { path: '/dashboard', component: Dashboard},
    { path: '/signin', component: Signin}
  ]
});

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

Not like this :

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

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

answered Jun 10, 2020 at 5:53

Sanjay Jha

1

Comments

VirtualLife · Accepted Answer · 2020-09-21 17:49:47Z

0

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

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

answered Sep 21, 2020 at 17:49

VirtualLife

4025 silver badges17 bronze badges

Comments

Adamy · Accepted Answer · 2021-02-23 21:29:14Z

0

If you put some customized codes in router/index.js, make sure you still export default router at the end.

const router = new Router({
  mode: 'history'
});
export default router;

answered Feb 23, 2021 at 21:29

Adamy

2,8493 gold badges30 silver badges25 bronze badges

Comments

AliCa · Accepted Answer · 2022-01-11 21:11:23Z

0

I have faced with this issue same as you. Then I realized at the end of the index.js that I forgot to add :

export default router

Then it solves the issue in my case.

answered Jan 11, 2022 at 21:11

AliCa

2881 gold badge5 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

2 Comments

1 Comment

vue & vue router & match bug & solution

match bugs

solution

import default module bug

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

vue & vue router & match bug & solution

match bugs

solution

import default module bug

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related