pageAdmin add setActivePageComputedByRoute function

src/components/Navbar.vue

@@ -14,9 +14,11 @@
             <h2 v-else class="mr-14 py-3 text-2xl font-black text-neutral-10">FILES</h2>
           </div>
           <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-            <li @click="switchNavItem($event, item)" v-for="(item, index) in navViewData[navViewName]"
-              :key="index" class="nav-item" :class="{'active': activePage?.toUpperCase() === item}">
-                {{ item }}
+            <li @click="onNavItemBtnClick($event, item)"
+              v-for="(item, index) in navViewData[navViewName]"
+              :key="index" class="nav-item"
+              :class="{'active': activePageComputedByRoute === item}">
+              {{ item }}
             </li>
           </ul>
         </div>
@@ -131,18 +133,23 @@ export default {
     noShowSaveButton: function() {
       return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' || this.activePage === 'PERFORMANCE' ? true : false;
     },
-    ...mapState(PageAdminStore, ['activePage', 'pendingActivePage']),
+    ...mapState(PageAdminStore, [
+      'activePage',
+      'pendingActivePage',
+      'activePageComputedByRoute',
+    ]),
   },
   watch: {
     '$route':'getNavViewName',
     filterName: function(newVal, oldVal) {
       this.filterName = newVal;
     },
-    activePage: function(newVal) {
-    }
   },
   mounted() {
-    if(this.$route.params.type === 'filter') this.createFilterId= this.$route.params.fileId;
+    this.handleNavItemBtn();
+    if(this.$route.params.type === 'filter') {
+      this.createFilterId= this.$route.params.fileId;
+    }
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer') ? true : false;
     this.getNavViewName();
   },
@@ -151,7 +158,8 @@ export default {
      * switch navbar item
      * @param {event} event 選取 Navbar 選項後傳入的值
      */
-    switchNavItem(event) {
+    onNavItemBtnClick(event) {
+      console.log('onNavItemBtnClick');
       let type;
       let fileId;
       let isCheckPage;
@@ -200,6 +208,7 @@ export default {
         return;
       }
 
+      // 說明this.$route.matched[1] 表示當前路由匹配的第二個路由記錄
       this.navViewName = this.$route.matched[1].name.toUpperCase();
       this.store.filesTag = 'ALL';
       switch (this.navViewName) {
@@ -233,6 +242,8 @@ export default {
 
       // Frontend is not sure which button will the user press on the modal,
       // so here we need to save to a pending state
+      // 前端無法確定用戶稍後會按下彈窗上的哪個按鈕(取消還是確認、儲存)，
+      // 因此我們需要將其保存到待處理狀態
       this.setPendingActivePage(valueToSet);
 
       return valueToSet;
@@ -299,10 +310,19 @@ export default {
           break;
       }
     },
+    /**
+     * Set nav item button background color in case the variable is an empty string
+     */
+    handleNavItemBtn() {
+      if(this.activePageComputedByRoute === "") {
+        this.setActivePageComputedByRoute(this.$route.matched[this.$route.matched.length - 1].name);
+      }
+    },
     ...mapActions(PageAdminStore, [
       'setPendingActivePage',
       'setPrevioiusPage',
-      'setActivePage'
+      'setActivePage',
+      'setActivePageComputedByRoute',
     ],),
   },
 }