tab router

src/components/tabs/index.vue

@@ -1,10 +1,7 @@
 <template>
-  <div>
-    <el-tabs :value="active" @tab-click="tab">
-      <slot/>
-    </el-tabs>
-    <router-view></router-view>
-  </div>
+  <el-tabs :value="active" @tab-click="tab">
+    <slot/>
+  </el-tabs>
 </template>
 <script>
 import qs from 'qs'
@@ -34,6 +31,12 @@ export default {
         }
         return isPanel
       })
+      const search = qs.parse(location.hash.split('?')[1])
+      if (this.panels.length) {
+        this.$nextTick(() => {
+          this.active = search[this.searchKey] || this.panels[0].child?.name
+        })
+      }
       this.panelsByName = data
     },
     tab(item) {
@@ -42,6 +45,7 @@ export default {
         ...query,
         [this.searchKey]: item.name
       })
+      this.active = item.name
       history.replaceState(location.pathname, null, `#${this.$route.path}?${search}`)
     }
   },
@@ -50,9 +54,6 @@ export default {
   },
   mounted() {
     this.getAllPanel()
-    if (this.panels.length) {
-      this.active = this.$route.query[this.searchKey] || this.panels[0].child?.name
-    }
   }
 }
 </script>