Discover: fix fetch api on once. And switch Navbar done.

src/components/Navbar.vue

@@ -3,12 +3,9 @@
     <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
       <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
         <div class="flex flex-1 items-center">
-            <h2 class="mr-28 text-2xl font-black text-neutral-10">FILES</h2>
+            <h2 class="mr-28 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
             <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-              <li @click="switchNavItem($event)">ALL</li>
-              <li @click="switchNavItem($event)">DISCOVER</li>
-              <li @click="switchNavItem($event)">COMPARE</li>
-              <li @click="switchNavItem($event)">DESIGN</li>
+              <li @click="switchNavItem($event)" v-for="(item, index) in navViewData[navViewName]" :key="index">{{ item }}</li>
           </ul>
         </div>
         <div class="flex justify-end items-center">
@@ -43,18 +40,21 @@ export default {
   data() {
     return {
       showNavbarBreadcrumb: false,
-      // 之後優化要模組化
-      // navViewData:
-      // {
-      //   FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
-      //   DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
-      // },
-      // navViewName: '',
+      navViewData:
+      {
+        FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
+        DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
+      },
+      navViewName: 'FILES',
     };
   },
+  watch: {
+    $route(to){
+      this.navViewName = to.name.toUpperCase();
+    }
+  },
   setup() {
     const store = filesStore();
-
     return {
       store,
     }
@@ -67,9 +67,6 @@ export default {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
   },
   methods: {
-    // switchNavView(name) {
-    //   this.navViewName = name;
-    // },
     switchNavItem(event) {
       this.store.filesTag = event.target.innerText;
     }