bugfix

src/components/Index.vue

@@ -21,7 +21,7 @@
             v-if="router.child && router.child.length == 0"
             :key="index"
             class="router-link"
-            @click="childRouteName = ''"
+            @click="clearRoute"
           >
             <router-link
               :to="{ path: router.menu_url, query: { token_code: token } }"
@@ -31,7 +31,7 @@
           </div>
 
           <el-dropdown v-else :key="index" placement="bottom">
-            <div :class="['parent-router', childRouteName ? 'active' : '']">
+            <div :class="['parent-router', router.isActive ? 'active' : '']">
               {{ router.right_name
               }}{{ childRouteName ? `/${childRouteName}` : "" }}
             </div>
@@ -70,7 +70,7 @@
             :key="index"
             :to="{ path: router.menu_url, query: { token_code: token } }"
           >
-            <span @click="childRouteName = ''">{{
+            <span @click="clearRoute">{{
               router.right_name
             }}</span></router-link
           >
@@ -203,8 +203,31 @@ export default {
       window.location.href = window.location.origin + "/pweb/m/";
     },
     setRoute(router, child) {
+      router.isActive = true;
       console.log(router, child);
+      localStorage.setItem("activeParentId", router.id);
+      localStorage.setItem("activeChildId", child.id);
+
       this.childRouteName = child.right_name;
+      this.$forceUpdate();
+    },
+    clearRoute() {
+      this.childRouteName = "";
+      localStorage.setItem("activeParentId", "");
+      localStorage.setItem("activeChildId", "");
+      this.leftNav = this.leftNav.map((item) => {
+        return {
+          ...item,
+          isActive: false,
+        };
+      });
+      this.rightNav = this.rightNav.map((item) => {
+        return {
+          ...item,
+          isActive: false,
+        };
+      });
+      this.$forceUpdate();
     },
   },
   computed: {
@@ -216,11 +239,26 @@ export default {
     getBaseInfo().then((res) => {
       this.screenDetail = res.data;
       document.title = res.data.project_name;
+      let menu = res.data.menu.map((item) => {
+        return {
+          ...item,
+          isActive:
+            localStorage.getItem("activeParentId") == item.id ? true : false,
+        };
+      });
+      let selectedMenu = res.data.menu.filter((item) => {
+        return item.id == localStorage.getItem("activeParentId");
+      });
+      if (selectedMenu.length > 0) {
+        this.childRouteName = selectedMenu[0].child.filter((item) => {
+          return item.id == localStorage.getItem("activeChildId");
+        })[0].right_name;
+      }
       if (res.data.menu.length >= 3) {
-        this.leftNav = res.data.menu.slice(0, 3);
-        this.rightNav = res.data.menu.slice(3, res.data.menu.length);
+        this.leftNav = menu.slice(0, 3);
+        this.rightNav = menu.slice(3, res.data.menu.length);
       } else {
-        this.leftNav = [...res.data.menu];
+        this.leftNav = [...menu];
       }
     });
     this.bodyScale();