Vue router. Root Vue has no data?

Question

I'm trying to get my head round vue-router. I'm used to instantiating Vue like this...

vm = new Vue({
   el : '#vueRoot',
   data : { msg : 'hello' }
   ...
})

Now I'm being asked to instantiate it passing the router...

vm = new Vue({
   router  
}).$mount('#vueRoot');

My question is where do I put my data or methods, or whatever other Vue properties I would normally use? I see that my root Vue can have markup, with router-link elements. Am I to understand that, once I use the router, everything should be in components?

Answer 1

You can use your default notation:

new Vue({
  el: '#app',
  router,
  template: '<MyApp/>',
  components: { MyApp }
})

But you must have a <router-view/> Element in your template.