解决更多菜单前一个路由刷新更多菜单也会高亮的bug

gassafety-web/src/components/TopNav/index.vue

@@ -24,8 +24,10 @@
     <!-- <div> -->
     <el-submenu
       class="onlyNavTio moreLise"
+      :class="{ noBg: moreMenu }"
       index="more"
       v-if="topMenus.length > visibleNumber"
+      ref="noBg"
     >
       <template slot="title">更多菜单</template>
       <template v-for="(item, index) in topMenus">
@@ -60,12 +62,15 @@ export default {
       myRouter: [],
       // 因为更多菜单前面的最后一个总是出问题，所以调整一下
       menuAcitve: null,
+      moreMenu: false,
     };
   },
+
   computed: {
     theme() {
       return this.$store.state.settings.theme;
     },
+
     // 顶部显示菜单
     topMenus() {
       let topMenus = [];
@@ -137,19 +142,52 @@ export default {
   },
   mounted() {
     this.setVisibleNumber();
+    this.moreMenuChange();
   },
   methods: {
     menuClick(e, item) {
       this.menuAcitve = item.meta.title;
+      this.moreMenu = false;
+    },
+    // 为了解决菜单样式bug问题
+    moreMenuChange() {
+      // 展示更多的前一个路由
+      const lastMenuPath = this.topMenus[this.visibleNumber - 1].path;
+      // 当前跳转的路由
+      const routerMenuPath = this.$route.matched[0].path;
+      // 如果点击的正好是展示更多的前一个,展示更多就不能拥有高亮
+      if (lastMenuPath == routerMenuPath) {
+        this.moreMenu = true;
+        this.$refs.noBg.$el.addEventListener("mouseover", this.mouseOver);
+        this.$refs.noBg.$el.addEventListener("mouseout", this.mouseOut);
+      } else {
+        this.removeEvt();
+      }
+      // var reg = new RegExp("(\\s|^)" + 'is-active' + "(\\s|$)");
+
+      // console.log("this.topMenus",this.topMenus[this.visibleNumber-1].path)
+      // console.log("this.topMenus",this.$route.matched[0].path)
+    },
+    mouseOver() {
+      this.moreMenu = false;
+    },
+    mouseOut() {
+      this.moreMenu = true;
+    },
+    removeEvt() {
+      this.$refs.noBg.$el.removeEventListener("mouseover", this.mouseOver);
+      this.$refs.noBg.$el.removeEventListener("mouseout", this.mouseOut);
     },
     // 根据宽度计算设置显示栏数
     setVisibleNumber() {
       const width = document.body.getBoundingClientRect().width / 3;
-      this.visibleNumber = parseInt(width / 90);
-      console.log(this.visibleNumber);
+      this.visibleNumber = parseInt(width / 88);
     },
     // 菜单选择事件
     handleSelect(key, keyPath) {
+      // 点菜单的时候清楚事件，为了解决菜单样式bug问题
+      this.removeEvt();
+
       let path;
       this.currentIndex = key;
       if (this.ishttp(key)) {
@@ -335,4 +373,7 @@ export default {
   }
   // height: 100px;
 }
+.noBg {
+  background: none !important ;
+}
 </style>