feat: 监听路由变换，高亮导航

src/views/comps/SubNav.vue

 <template>
   <el-menu
-    :default-active="activeMenu"
-    class="el-menu-vertical gs-subnav"
-    :collapse="false"
-    :default-openeds="openeds"
-    @select="handleSelect"
+      :default-active="activeMenu"
+      class="el-menu-vertical gs-subnav"
+      :collapse="false"
+      :default-openeds="openeds"
+      @select="handleSelect"
   >
     <template v-for="submenu in subNav">
       <el-submenu
-        v-if="submenu.children && submenu.children.length > 0"
-        :key="submenu.id"
-        :index="submenu.name"
+          v-if="submenu.children && submenu.children.length > 0"
+          :key="submenu.id"
+          :index="submenu.name"
       >
         <template slot="title">
           <span>{{ submenu.name }}</span>
@@ -23,9 +23,9 @@
               </template>
               <template v-for="third in item.children">
                 <el-menu-item
-                  :key="third.id"
-                  :index="third.name"
-                  :class="{ 'is-active': activeMenu === third.id }"
+                    :key="third.id"
+                    :index="third.name"
+                    :class="{ 'is-active': activeMenu === third.id }"
                 >
                   {{ third.name }}
                 </el-menu-item>
@@ -34,9 +34,9 @@
           </template>
           <template v-else>
             <el-menu-item
-              :key="item.id"
-              :index="item.name"
-              :class="{ 'is-active': activeMenu === item.id }"
+                :key="item.id"
+                :index="item.name"
+                :class="{ 'is-active': activeMenu === item.id }"
             >
               {{ item.name }}
             </el-menu-item>
@@ -45,9 +45,9 @@
       </el-submenu>
       <template v-else>
         <el-menu-item
-          :key="submenu.id"
-          :index="submenu.name"
-          :class="{ 'is-active': activeMenu === submenu.id }"
+            :key="submenu.id"
+            :index="submenu.name"
+            :class="{ 'is-active': activeMenu === submenu.id }"
         >
           <span>{{ submenu.name }}</span>
         </el-menu-item>
@@ -56,7 +56,7 @@
   </el-menu>
 </template>
 <script>
-import { mapState } from "vuex";
+import {mapState} from "vuex";
 
 export default {
   data() {
@@ -77,16 +77,24 @@ export default {
       handler(val) {
         // console.log("watch------ subNav", val);
         const result = this.treeFind(
-          val,
-          (item) => item.link === this.$route.path
+            val,
+            (item) => item.link === this.$route.path
         );
         if (result) {
-          console.log(result);
           this.activeMenu = result.id;
         }
       },
       immediate: true,
     },
+    $route(to, from) {
+      const result = this.treeFind(
+          this.subNav,
+          (item) => item.link === this.$route.path
+      );
+      if (result) {
+        this.activeMenu = result.id;
+      }
+    }
   },
   methods: {
     treeFind(tree, func) {
@@ -147,7 +155,7 @@ export default {
         if (item.breadcrumb) {
           this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
         }
-        this.$router.push({ path: item.link });
+        this.$router.push({path: item.link});
       }
     },