CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-router
Mohammad Reza
Mohammad Reza

Reputation: 1203

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

Upvotes: 36

Views: 54763

Answers (7)

AliCa
AliCa

Reputation: 269

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.

Upvotes: 0

Adamy
Adamy

Reputation: 2849

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;

Upvotes: 0

VirtualLife
VirtualLife

Reputation: 402

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

Upvotes: 0

Sanjay Jha
Sanjay Jha

Reputation: 1

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

Upvotes: 0

xgqfrms
xgqfrms

Reputation: 12136

vue & vue router & match bug & solution

match bugs

image

image

solution

name must be router

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

image

OK

image

image

import default module bug

import default module no need {}!

Upvotes: 2

Hugo Ramirez
Hugo Ramirez

Reputation: 496

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

Upvotes: 2

Bert
Bert

Reputation: 82439

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

Upvotes: 100

Related Questions