tabs

src/components/tabs/index.vue

@@ -1,9 +1,13 @@
 <template>
-  <el-tabs :value="active" @tab-click="tab">
-    <slot/>
-  </el-tabs>
+  <div>
+    <el-tabs :value="active" @tab-click="tab">
+      <slot/>
+    </el-tabs>
+    <router-view></router-view>
+  </div>
 </template>
 <script>
+import qs from 'qs'
 export default {
   name: 'tab-router',
   props: {
@@ -21,37 +25,31 @@ export default {
   },
   methods: {
     getAllPanel() {
+      const data = {}
+      const routes = []
       this.panels = this.$slots.default.filter(item => {
         const isPanel = item.tag && item.tag.indexOf('ElTabPane') > -1
-        const data = {}
         if (isPanel && item.child) {
           data[item.child.name] = item.child
-          item.child.$slots = {}
-          console.log(item)
         }
         return isPanel
       })
+      this.panelsByName = data
     },
     tab(item) {
-      this.$router.replace({
-        path: this.$route.path,
-        query: {
-          ...this.$route.query,
-          [this.searchKey]: item.name
-        }
+      const { query } = this.$route
+      const search = qs.stringify({
+        ...query,
+        [this.searchKey]: item.name
       })
+      history.replaceState(location.pathname, null, `#${this.$route.path}?${search}`)
     }
   },
   beforeUpdate() {
     this.getAllPanel()
   },
-  beforeRouteEnter(to, form, next) {
-    console.log(to, form)
-    next()
-  },
   mounted() {
     this.getAllPanel()
-    console.log(this.panelsByName)
     if (this.panels.length) {
       this.active = this.$route.query[this.searchKey] || this.panels[0].child?.name
     }