Skip to content

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:


      <router-link to='/'>Home</router-link>
      <router-link to='/query'>Query</router-link>


    export default {}


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

import routes from './routes.js'
import App from './App.vue'

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


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',
  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)