sync tab selection with URL

5 files changed, 69 insertions, 32 deletions

diff --git a/package-lock.json b/package-lock.json
index 8fd3bd2..45586de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12061,6 +12061,12 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-router": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
+      "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w==",
+      "dev": true
+    },
     "vue-style-loader": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.0.tgz",
diff --git a/package.json b/package.json
index 62a7525..10f4fdf 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "vue-loader": "^15.0.9",
+    "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^4.8.1",
     "webpack-cli": "^2.1.3",
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),
 });