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

Answer 1

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

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