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

@@ -23,7 +23,7 @@
                     class="gs-nav-item nav-item"
                     :key="nav.id"
                     :class="{ active: currentNav === nav.id }"
-                  @click.stop="handleNavClick(nav)"
+                    @click="handleNavClick(nav,$event)"
                 >
                   <a
                       :id="`gs-nav-item-${nav.id}`"
@@ -37,13 +37,13 @@
                   >
 
                   <!-- 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)"
+                    @click="handleNavClick(nav,$event)"
                     class="gs-nav-item nav-item"
                     :class="{ active: currentNav === nav.id }"
                 >
@@ -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: "",
@@ -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 {
+        // 点击事件不来自子代导航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 = "";
+            }
+            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_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;