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.

Answer 2

In your Main.js

    window.Vue = require('vue');
    import VueRouter from 'vue-router'
    import Overview from '../components/Overview.vue';
    import Sale from '../components/Sale.vue';


    Vue.use(VueRouter);

    let routes = [
        {path: '/home', component: Overview,name:'Overview'},
        {path: '/sale', component: Sale, name:'Sale'},
    ];


    const router = new VueRouter({
        mode: 'history',
        routes 
    });


    const app = new Vue({
        el: '#vueRoot',
        router,
    });

In your Root View place element

 <router-view></router-view>

In your links

                 <router-link to="/sale" class="nav-link">
                    <i class="nav-icon fas fa-cart-plus "></i>
                    <p>
                        Point of Sale

                    </p>
                </router-link>

In your Views

          <template>
              <v-app>
                {{viewTitle}}
                {{viewSubtitle}}
              </v-app>
            </template>
            <script>
                export default {
                      data() {
                    return {
                       viewTitle:'Home',
                       viewSubtitle:'description',

                    }
                  },

               methods: {
                    YourMethod_1() {

                    },
                     YourMethod_2() {

                    },
                  }
                }
            </script>

Answer 3

This is how the latest versions of Vue.js works with router

import App from './App';
import VueRouter from 'vue-router';
import {routes} from './routes';
const router = new VueRouter({
   routes,
   mode: "history", // you can remove this if not required
});

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

routes.js

export const routes = [
  // your components as objects
]

App.vue

 <template>
    <div>
        <router-view/>
    </div>
 </template>

 <script>
    export default {
      name: "App"
    }
 </script>