Vue-router error: TypeError: Unable to read match property undefined

Question

I am trying to write my first Vuejs application. I am using vue-cli and a simple webpack template .

When I add vue-router links to my application component, I get this error in the console

Error in rendering function: "TypeError: cannot read property" match "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 adding it to Vue should be a router .

 import router from './routes.js' const app = new Vue({ el: '#app', router, render: h => h(App) }) 

If for any reason you want to call the routes variable, you can assign it this way.

 import routes from './routes.js' const app = new Vue({ el: '#app', router: routes, render: h => h(App) })