dy-admin-manager/src/components/tabs/index.vue

<template>
  <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: {
    searchKey: {
      type: String,
      default: 'tabrouter'
    }
  },
  data() {
    return {
      active: '',
      panels: [],
      panelsByName: {}
    }
  },
  methods: {
    getAllPanel() {
      const data = {}
      const routes = []
      this.panels = this.$slots.default.filter(item => {
        const isPanel = item.tag && item.tag.indexOf('ElTabPane') > -1
        if (isPanel && item.child) {
          data[item.child.name] = item.child
        }
        return isPanel
      })
      this.panelsByName = data
    },
    tab(item) {
      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()
  },
  mounted() {
    this.getAllPanel()
    if (this.panels.length) {
      this.active = this.$route.query[this.searchKey] || this.panels[0].child?.name
    }
  }
}
</script>
<style lang="less" scoped>

</style>