<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>