feat: 解决菜单高亮问题

src/components/layout/header/HeaderDropdown.vue

@@ -64,7 +64,7 @@ export default {
       }
       return (<div class="gs-dropdown-rect">
         <div class="rect-title"
-             vOn:click_stop_prevent={() => {
+             vOn:click={() => {
                this.$emit('itemClick', {...nav, root: {...this.nav}})
              }}
         >
@@ -82,7 +82,7 @@ export default {
       return (<div class={classNames.join(' ').trim()}>
         {items.map(item => {
           return (<div class="gs-dropdown-item">
-            <span vOn:click_stop_prevent={() => {
+            <span vOn:click={() => {
               this.$emit('itemClick', {...item, root: {...this.nav}})
             }}
                   class="pointer gs-hover"

src/components/layout/header/index.vue

@@ -5,9 +5,9 @@
         <!-- Default Logo -->
         <a class="navbar-brand" href="/Home" aria-label="Front">
           <img
-            class="navbar-brand-logo"
-            src="../../../assets/image/head/logo.png"
-            alt="Logo"
+              class="navbar-brand-logo"
+              src="../../../assets/image/head/logo.png"
+              alt="Logo"
           />
         </a>
         <!-- End Default Logo -->
@@ -19,37 +19,37 @@
               <!-- Nav items-->
               <template v-for="nav in navList">
                 <li
-                  v-if="nav.children && nav.children.length > 0"
-                  class="gs-nav-item nav-item"
-                  :key="nav.id"
-                  :class="{ active: currentNav === nav.id }"
-                  @click.stop="handleNavClick(nav)"
+                    v-if="nav.children && nav.children.length > 0"
+                    class="gs-nav-item nav-item"
+                    :key="nav.id"
+                    :class="{ active: currentNav === nav.id }"
+                    @click="handleNavClick(nav,$event)"
                 >
                   <a
-                    :id="`gs-nav-item-${nav.id}`"
-                    class="nav-link"
-                    aria-current="page"
-                    href="javascript:void(0)"
-                    role="button"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                    >{{ nav.name }}</a
+                      :id="`gs-nav-item-${nav.id}`"
+                      class="nav-link"
+                      aria-current="page"
+                      href="javascript:void(0)"
+                      role="button"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                  >{{ nav.name }}</a
                   >
 
                   <!-- Dropdown Menu -->
-                  <HeaderDropdown :nav="nav" @itemClick="handleItemClick" />
+                  <HeaderDropdown :nav="nav" @itemClick="handleItemClick"/>
                   <!-- End Dropdown Menu -->
                 </li>
                 <li
-                  v-else
-                  :key="nav.id"
-                  @click.stop="handleNavClick(nav)"
-                  class="gs-nav-item nav-item"
-                  :class="{ active: currentNav === nav.id }"
+                    v-else
+                    :key="nav.id"
+                    @click="handleNavClick(nav,$event)"
+                    class="gs-nav-item nav-item"
+                    :class="{ active: currentNav === nav.id }"
                 >
                   <a class="nav-link" href="javascript:void(0)">{{
-                    nav.name
-                  }}</a>
+                      nav.name
+                    }}</a>
                 </li>
               </template>
 
@@ -60,7 +60,7 @@
         <!-- End Collapse -->
 
         <!-- Button -->
-        <HeaderBtn />
+        <HeaderBtn/>
         <!-- End Button -->
       </nav>
     </div>
@@ -70,12 +70,16 @@
 <script>
 import HeaderBtn from "./HeaderBtn.vue";
 import HeaderDropdown from "./HeaderDropdown.vue";
-import { nav } from "./mock";
+import {nav} from "./mock";
 
 export default {
-  components: { HeaderBtn, HeaderDropdown },
+  components: {HeaderBtn, HeaderDropdown},
   data() {
     return {
+      // 点击事件来自头部导航
+      fromNav: false,
+      // 点击事件来自dropdown
+      fromDropdown: false,
       navList: nav,
       currentNav: "0",
       preActive: "",
@@ -91,14 +95,14 @@ export default {
         //   this.$store.commit("system/SET_SUB_NAV", nav_.children);
         if (nav_.link === this.$route.path) {
           nav_.breadcrumb &&
-            this.$store.commit("system/SET_BREADCRUMB", nav_.breadcrumb);
+          this.$store.commit("system/SET_BREADCRUMB", nav_.breadcrumb);
         } else {
           // TODO 去dropdown里面精确查找当前的路径
           const result = this.comparePath(nav_.children, this.$route.path);
           console.log(result);
           result &&
-            result.breadcrumb &&
-            this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
+          result.breadcrumb &&
+          this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
         }
       }
     });
@@ -127,37 +131,59 @@ export default {
       return result;
     },
     handleWindowClick() {
-      console.log(this.preActive);
-      if (this.preActive) {
+      console.log('handleWindowClick', this.fromNav, this.preActive);
+      if (this.preActive && !this.fromNav) {
         this.currentNav = this.preActive;
         this.preActive = "";
       }
+      this.fromNav = false;
+      this.fromDropdown = false;
     },
+
     handleNavClick(nav) {
       if (!nav.children || nav.children.length === 0) {
         this.currentNav = nav.id;
-        this.$router.push({ path: nav.link });
+        this.preActive = "";
+        this.$router.push({path: nav.link});
       } else {
-        // 点击的是有dropdown的nav 需要保存当前激活状态
-        this.preActive = this.currentNav;
-        this.currentNav = "";
+        // 点击事件不来自子代导航item
+        if (!this.fromDropdown) {
+          console.log('!this.fromDropdown', this.currentNav, nav.id)
+          // 重复点击同一个nav
+          if (this.currentNav === nav.id) {
+            this.currentNav = this.preActive;
+            this.preActive = ""
+          }else{
+            // 点击的是有dropdown的nav 需要保存当前激活状态
+            if (this.preActive === "") {
+              this.preActive = this.currentNav;
+            }
+            this.currentNav = nav.id;
+            this.fromNav = true;
+          }
+        }
       }
     },
+
     handleItemClick(item) {
+      this.fromDropdown = true;
       if (item.link.startsWith("http")) {
         window.open(item.link);
       } else {
-        if (this.preActive !== "") {
-          this.preActive = "";
-        }
-        this.currentNav = item.root.id;
+        console.log(item.root)
+        this.updateCurrent(item.root.id);
         item.breadcrumb &&
-          this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
-        this.$store.commit("system/SET_SUB_NAV", item.root.children);
-
-        this.$router.push({ path: item.link });
+        this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
+        // this.$store.commit("system/SET_SUB_NAV", item.root.children);
+        this.$router.push({path: item.link});
       }
     },
+
+    updateCurrent(id) {
+      console.log('updateCurrent', id);
+      this.currentNav = id;
+      this.preActive = "";
+    }
   },
 };
 </script>
@@ -186,6 +212,7 @@ export default {
     &.active > a,
     a.show {
       color: #f26335;
+
       &::after {
         content: "";
         position: absolute;