fix error

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>