VueRouter Pattern

main.js

// main.js
import Vue from 'vue';
import router from './router';
import App from './App';
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

router.js

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import AuthHandler from './components/AuthHandler';
import MainPage from './components/MainPage';
Vue.use(VueRouter);
export default new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: MainPage },
    { path: '/oauth2/callback', component: AuthHandler },
  ],
});

App.vue

// App.vue
<template>
  <div>
    <AppHeader />
    <main>
      <router-view />
    </main>
  </div>
</template>
<script>
import AppHeader from './components/AppHeader';
export default {
  name: "App",
  components: {
    AppHeader
  }
};
</script>