fix error

package-lock.json

@@ -12383,9 +12383,9 @@
       }
     },
     "vue-router": {
-      "version": "4.0.0-beta.10",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-beta.10.tgz",
-      "integrity": "sha512-y3YxV8rO9e4mgFqdyskytRMLzwbxR65ZaAW59xZL+T3M3kHX5p+/XB6j7K5cVm/EgZFOLRb+Zht3ShVaEonn/A=="
+      "version": "4.0.0-beta.13",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-beta.13.tgz",
+      "integrity": "sha512-dYv9qpHPaojQlfujViiTkPkf1Bf5RCFzkCkdVFc1cENzWJYAGJanpIHiyjyKoM4u7IDFBZMItci+U4ieaEWA8A=="
     },
     "vue-style-loader": {
       "version": "4.1.2",

package.json

@@ -14,7 +14,7 @@
     "highcharts": "^7.1.2",
     "mongodb": "^3.2.7",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-beta.10",
+    "vue-router": "^4.0.0-beta.13",
     "vuex": "^4.0.0-beta.4"
   },
   "devDependencies": {

src/App.vue

@@ -1,72 +1,3 @@
 <template>
-  <div id="app">
-    <NavBar :activeType="type" @set-type="setType"></NavBar>
-    <section class="section">
-      <TimeWindows :activeWindow="window" @set-window="setWindow"></TimeWindows>
-      <Chart :window="window" :type="type"></Chart>
-    </section>
-  </div>
+  <router-view></router-view>
 </template>
-<script>
-import { ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import NavBar from '@/components/NavBar'
-import TimeWindows from '@/components/TimeWindows'
-import Chart from '@/components/Chart'
-export default {
-  components: {
-    NavBar,
-    TimeWindows,
-    Chart
-  },
-  setup() {
-    const type = ref(null)
-    const window = ref({})
-    const route = useRoute()
-    const router = useRouter()
-    if (route.params.type) type.value = route.params.type
-    if (route.params.window) window.value = route.params.window
-    const updateRoute = () => {
-      if (type.value) {
-        const route = {
-          name: 'view',
-          params: {
-            type: type.value,
-            window: window.value.label ? window.value.label.replace(' ', '-') : undefined
-          }
-        }
-        router.push(route)
-      }
-    }
-    const setType = (newType) => {
-      type.value = newType
-      updateRoute()
-    }
-    const setWindow = (newWindow) => {
-      window.value = newWindow
-      updateRoute()
-    }
-    return {
-      type,
-      window,
-      setType,
-      setWindow
-    }
-  }
-}
-</script>
-<style scoped>
-#app {
-  height: 100%;
-}
-#app,
-.section {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-.section {
-  padding-bottom: 0;
-  padding-top: 0;
-}
-</style>

src/components/Main.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="app">
+    <NavBar :activeType="type" @set-type="setType"></NavBar>
+    <section class="section">
+      <TimeWindows :activeWindow="window" @set-window="setWindow"></TimeWindows>
+      <Chart :window="window" :type="type"></Chart>
+    </section>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import NavBar from '@/components/NavBar'
+import TimeWindows from '@/components/TimeWindows'
+import Chart from '@/components/Chart'
+export default {
+  components: {
+    NavBar,
+    TimeWindows,
+    Chart
+  },
+  setup() {
+    const type = ref(null)
+    const window = ref({})
+    const router = useRouter()
+    const currentRoute = router.currentRoute
+    if (currentRoute.value.params.type) type.value = currentRoute.value.params.type
+    if (currentRoute.value.params.window) window.value = { label: currentRoute.value.params.window }
+    console.log(type.value, window.value)
+    const updateRoute = () => {
+      if (type.value) {
+        const route = {
+          name: 'view',
+          params: {
+            type: type.value,
+            window: window.value.label ? window.value.label.replace(' ', '-') : undefined
+          }
+        }
+        router.push(route)
+      }
+    }
+    const setType = (newType) => {
+      type.value = newType
+      updateRoute()
+    }
+    const setWindow = (newWindow) => {
+      window.value = newWindow
+      updateRoute()
+    }
+    return {
+      type,
+      window,
+      setType,
+      setWindow
+    }
+  }
+}
+</script>
+<style scoped>
+#app {
+  height: 100%;
+}
+#app,
+.section {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.section {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+</style>

src/components/TimeWindows.vue

@@ -74,7 +74,10 @@ export default {
       }
     ])
     onMounted(() => {
-      if (!props.activeWindow.label) emit('set-window', windows.value[1])
+      const activeWindow = !props.activeWindow.label
+        ? windows.value[1]
+        : windows.value.find((w) => w.label === props.activeWindow.label.replace('-', ' '))
+      emit('set-window', activeWindow)
     })
     return {
       windows

src/router.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import App from '@/App'
+import Main from '@/components/Main'
 export default createRouter({
   history: createWebHistory(),
   base: process.env.BASE_URL,
@@ -7,7 +7,7 @@ export default createRouter({
     {
       path: '/:type?/:window?',
       name: 'view',
-      component: App
+      component: Main
     }
   ]
 })