sync tab selection with URL

3 files changed, 62 insertions, 32 deletions

diff --git a/src/App.vue b/src/App.vue
index aa2d19c..4c0911b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,36 +9,6 @@
       </div>
     </section>
 
-    <b-tabs>
-      <b-tab-item label="Blitz">
-        <blitz-tab :reportService="reportService"></blitz-tab>
-      </b-tab-item>
-
-      <b-tab-item label="Battle Royale">
-        <battle-royale-tab :reportService="reportService"></battle-royale-tab>
-      </b-tab-item>
-    </b-tabs>
+    <router-view></router-view>
   </div>
 </template>
-
-<script>
-import Vue from 'vue';
-import BlitzTab from './BlitzTab.vue';
-import BattleRoyaleTab from './BattleRoyaleTab.vue';
-import ReportService from './report-service.js';
-
-const reportService = new ReportService();
-
-export default {
-  name: 'app',
-  data: function() {
-    return {
-      reportService,
-    };
-  },
-  components: {
-    BlitzTab,
-    BattleRoyaleTab,
-  },
-};
-</script>
diff --git a/src/Home.vue b/src/Home.vue
new file mode 100644
index 0000000..c0fef32
--- /dev/null
+++ b/src/Home.vue
@@ -0,0 +1,41 @@
+<template>
+    <b-tabs v-model="tabIndex">
+      <b-tab-item label="Blitz">
+        <blitz-tab :reportService="reportService"></blitz-tab>
+      </b-tab-item>
+
+      <b-tab-item label="Battle Royale">
+        <battle-royale-tab :reportService="reportService"></battle-royale-tab>
+      </b-tab-item>
+    </b-tabs>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import BlitzTab from './BlitzTab.vue';
+import BattleRoyaleTab from './BattleRoyaleTab.vue';
+import ReportService from './report-service.js';
+
+export default Vue.component('home', {
+  props: [ 'reportService' ],
+  data: function() {
+    return {
+    };
+  },
+  computed: {
+    tabIndex: {
+      get: function() {
+        return this.$route.query.tab;
+      },
+      set: function(value) {
+        this.$router.push({ query: { tab: value }});
+      },
+    },
+  },
+  components: {
+    BlitzTab,
+    BattleRoyaleTab,
+  },
+});
+</script>
diff --git a/src/index.js b/src/index.js
index 8f584ce..3b3839d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,31 @@
 import Vue from 'vue';
+import VueRouter from 'vue-router';
 import Buefy from 'buefy'
 import 'buefy/lib/buefy.css'
 
 import App from './App.vue';
+import Home from './Home.vue';
 
+import ReportService from './report-service.js';
+
+Vue.use(VueRouter);
 Vue.use(Buefy);
 
+const reportService = new ReportService();
+
+const router = new VueRouter({
+  routes: [ {
+    path: '/',
+    name: 'home',
+    component: Home,
+    props: (route) => ({
+      reportService,
+    }),
+  } ]
+});
+
 new Vue({
+  router,
   el: '#app',
-  render: h => h(App)
+  render: h => h(App),
 });