SaaS-lib/lib/saas/view/system/layout/tabContent.vue

<template>
  <a-tabs v-model:activeKey="activeKey" size="large" @tabClick="tabChange">
    <a-tab-pane v-for="(item, index) in tabListAuth" :key="index" :tab="item.title">
      <router-view v-slot="{ Component }">
        <!-- <keep-alive :include="data"> -->
        <component :is="Component" />
        <!-- </keep-alive> -->
      </router-view> </a-tab-pane
    >>
  </a-tabs>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, watch } from 'vue';
  import { useKeepAlive } from '/nerv-base/store/modules/keepAlive';
  import { useRouter, onBeforeRouteUpdate, useRoute } from 'vue-router';
  import { authorizationService } from '/nerv-base/store/modules/authorization-service';
  export default defineComponent({
    name: 'RecipientsToReturnIndex',
    props: {
      tabList: {
        type: Array,
        default: () => [],
      },
      selfName: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      let activeKey = ref(0);
      const authorizationStore = authorizationService();
      const keepAliveStore = useKeepAlive();
      const router = useRouter();
      const route = useRoute();
      const selfName = props['selfName'];
      let tabListAuth = props['tabList'].filter((el) => {
        if (authorizationStore.checkAllPermission(el.name)) {
          return el;
        }
      });
      const tabChange = function (params) {
        let name = tabListAuth[params]['name'];
        router.push({
          name: name,
        });
      };

      const exitRouter = (to) => {
        let nameList = to.matched.map((el) => {
          return el.name;
        });
        tabListAuth.some((el, i) => {
          if (nameList.includes(el.name)) {
            activeKey.value = i;
            return true;
          }
        });
        // tabChange(activeKey.value);
      };

      exitRouter(router.currentRoute.value);

      onBeforeRouteUpdate((to) => {
        exitRouter(to);
      });

      const data = computed(() => {
        return keepAliveStore.getKeepAlive;
      });

      if (tabListAuth.length) {
        if (route.name?.toString().toLowerCase().includes('index')) {
          tabChange(activeKey.value);
        }
      }

      watch(
        () => route.path,
        (value) => {
          // tabChange(activeKey.value)
          exitRouter(route);
          if (route.name === selfName) {
            tabChange(activeKey.value);
          }
        },
      );

      // onActivated
      // onActivated(()=>{
      //   console.log(',mmm')
      // });

      return {
        activeKey,
        data,
        tabChange,
        tabListAuth,
      };
    },
    activated() {
      this.tabChange(this.activeKey);
    },
  });
</script>
<style lang="less" scoped>
  .desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
  }

  :deep(.ant-tabs-nav-wrap) {
    padding: 0 24px !important;
  }
</style>