Vue.js router init works with router.map not with the Router constructor

Question

In my app, I use the vue-router. Routes work when I pass them to the router with router.map({}), but they don't work when I pass them in the constructor. Any idea why this is?

// works:
const router = new VueRouter() 
router.map({
    '/user' : {
        component : User,
        subRoutes : {}
    }
})

// does not work:
const router = new VueRouter({
    routes : [
        {
            path : '/user',
            component : User,
            children : []
        }
    ]
})

Answer 1

Currently there are 2 versions of Vue Router.

1st - Vue Router 0.7.x which only works with VueJS 1.x.x version.The working example you posted is Vue Router 0.7.x version syntax, so probably you are running VueJS 1.x.x on your app.

2nd - Vue Router 2.x which only works with VueJS 2.x.x.The second non-working examplte is Vue Router 2.x version syntax.

So make sure what VueJS version you are running, and then apply correct Vue Router Version, and use correct syntax.

Docs for Vue Router 2.x.x - https://router.vuejs.org/en/ Docs for Vue Router 0.7.x - https://github.com/vuejs/vue-router/tree/1.0/docs/en