Add url selectable date

src/components/Home.vue

 <template>
 
     <b-container fluid>
+        <b-row class="justify-content-center">
+            <b-card class="ml-3 mb-2">
+                <b-card-sub-title><h5>Last dynamic spectrum</h5></b-card-sub-title>
+                <b-card-body>
+                    <a :href="last_dynspec">
+                        <b-img-lazy fluid width="500px" v-bind:src="last_dynspec"></b-img-lazy>
+                    </a>
+                </b-card-body>
+
+            </b-card>
+            <b-card class="ml-3 mb-2">
+                <b-card-sub-title><h5>Last hour dynamic spectrum</h5></b-card-sub-title>
+                <b-card-body>
+                    <a :href="last_hour_dynspec">
+                        <b-img-lazy fluid width="500px" v-bind:src="last_hour_dynspec"></b-img-lazy>
+                    </a>
+                </b-card-body>
+
+            </b-card>
+        </b-row>
         <b-row>
             <TimeSelector class="float-left" @select-date="handleSelectDate"></TimeSelector>
             <BeamSelector class="float-right" @select-beam="handleSelectBeam"></BeamSelector>
@@ -10,7 +30,8 @@
             <b-col class="float-left" v-if="selectedDate != null">Selected date is {{ selectedDate }}</b-col>
             <b-col class="float-right" v-if="selectedBeam != null">Selected beam is {{ selectedBeam }}</b-col>
         </b-row>
-    <ProductsList v-bind:selectedDate="selectedDate" v-if='selectedDate != null' v-bind:selectedBeam="selectedBeam"></ProductsList>
+        <ProductsList v-bind:selectedDate="selectedDate" v-if='selectedDate != null'
+                      v-bind:selectedBeam="selectedBeam"></ProductsList>
         <span v-if="selectedDate==null"><h2>Please select a date</h2></span>
     </b-container>
 </template>
@@ -29,10 +50,22 @@ export default {
     },
     data() {
         return {
-      selectedDate : null,
-      selectedBeam : null
+            selectedDate: this.$route.params.date,
+            selectedBeam: null,
+            last_dynspec: "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec.png",
+            last_hour_dynspec: "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec1H.png",
 
+
+        }
+    },
+    created() {
+        this.$watch(
+            () => this.$route.params,
+            (toParams, previousParams) => {
+                console.log("HEY")
+                console.log(toParams, previousParams, this.$route.params.date)
             }
+        )
     },
     methods: {
         handleSelectDate(date) {

src/main.js

@@ -16,6 +16,7 @@ import DisplayTAB from "@/components/DisplayTAB";
 import Home from "@/components/Home";
 const routes = [
     { path: '/', component: Home},
+    { path: '/:date', component: Home},
     { path: '/display', component: DisplayTAB}
 
 ]

yarn.lock

@@ -2344,9 +2344,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286:
-  version "1.0.30001300"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz"
-  integrity sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==
+  version "1.0.30001480"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz"
+  integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"