admin-sjzx/src/layouts/admin/router-view/main.vue

<template>
    <el-main class="layout-main" :style="mainHeight()">
        <router-view v-slot="{ Component, route: viewRoute }">
            <transition :name="config.layout.mainAnimation" mode="out-in">
                <keep-alive :include="state.keepAliveComponentNameList">
                    <component
                        :is="Component"
                        v-if="Component"
                        :key="state.componentKey || viewRoute.fullPath"
                    />
                </keep-alive>
            </transition>
        </router-view>
    </el-main>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, onBeforeMount, onUnmounted, nextTick, provide } from 'vue'
import { useRoute, type RouteLocationNormalized } from 'vue-router'
import { mainHeight } from '@/utils/layout'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'

defineOptions({
    name: 'layout/main'
})

const { proxy } = useCurrentInstance()

const route = useRoute()
const config = useConfig()
const navTabs = useNavTabs()

const state: {
    componentKey: string
    keepAliveComponentNameList: string[]
} = reactive({
    componentKey: '',
    keepAliveComponentNameList: []
})

const addKeepAliveComponentName = function (keepAliveName: string | undefined) {
    if (keepAliveName) {
        let exist = state.keepAliveComponentNameList.find((name: string) => {
            return name === keepAliveName
        })
        if (exist) return
        state.keepAliveComponentNameList.push(keepAliveName)
    }
}

onBeforeMount(() => {
    proxy.eventBus.on('onTabViewRefresh', (menu: RouteLocationNormalized) => {
        state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter(
            (name: string) => menu.meta.keepalive !== name
        )
        // 临时换 key 强制卸载，再在 nextTick 恢复为路由 fullPath，避免 keep-alive 缓存错乱
        state.componentKey = `${menu.fullPath || menu.path}__refresh__${Date.now()}`
        nextTick(() => {
            state.componentKey = ''
            addKeepAliveComponentName(menu.meta.keepalive as string)
        })
    })
    proxy.eventBus.on('onTabViewClose', (menu: RouteLocationNormalized) => {
        state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter(
            (name: string) => menu.meta.keepalive !== name
        )
    })
})

onUnmounted(() => {
    proxy.eventBus.off('onTabViewRefresh')
    proxy.eventBus.off('onTabViewClose')
})

onMounted(() => {
    // 确保刷新页面时也能正确取得当前路由 keepalive 参数
    if (typeof navTabs.state.activeRoute?.meta.keepalive == 'string') {
        addKeepAliveComponentName(navTabs.state.activeRoute?.meta.keepalive)
    }
})

watch(
    () => route.path,
    () => {
        if (typeof navTabs.state.activeRoute?.meta.keepalive == 'string') {
            addKeepAliveComponentName(navTabs.state.activeRoute?.meta.keepalive)
        }
    }
)

</script>

<style scoped lang="scss">
.layout-container .layout-main {
    padding: 0 !important;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.layout-main-scrollbar {
    width: 100%;
    position: relative;
    //overflow: hidden;
}
</style>