Files
Web_Template_Vue3_Dev/library/components/VabRouterView/index.vue

81 lines
2.5 KiB
Vue
Raw Normal View History

<script lang="ts" setup>
import VabProgress from 'nprogress'
import { useSettingsStore } from '@/store/modules/settings'
import { useTabsStore } from '@/store/modules/tabs'
import { handleActivePath } from '@/utils/routes'
import { keepAliveMaxNum } from '@/config'
import { VabRouteRecord } from '/#/router'
const route = useRoute()
const $sub: any = inject('$sub')
const $unsub: any = inject('$unsub')
const settingsStore = useSettingsStore()
const { theme } = storeToRefs(settingsStore)
const tabsStore = useTabsStore()
const { getVisitedRoutes: visitedRoutes } = storeToRefs(tabsStore)
const componentRef = ref()
const routerKey = ref()
const keepAliveNameList = ref()
const updateKeepAliveNameList = (refreshRouteName = null) => {
keepAliveNameList.value = visitedRoutes.value
.filter(
(item: VabRouteRecord) =>
!item.meta.noKeepAlive && item.name !== refreshRouteName
)
.flatMap((item: VabRouteRecord) => item.name)
}
// 更新KeepAlive缓存页面
watchEffect(() => {
routerKey.value = handleActivePath(route, true)
updateKeepAliveNameList()
})
// 获取源码地址
$sub('get-code', () => {
window.open(
`https://github.com/zxwk2024/admin-plus/blob/main/${componentRef.value.$options.__source}`
)
})
$sub('reload-router-view', (refreshRouteName: any = route.name) => {
if (theme.value.showProgressBar) VabProgress.start()
const cacheActivePath = routerKey.value
routerKey.value = null
updateKeepAliveNameList(refreshRouteName)
nextTick(() => {
routerKey.value = cacheActivePath
updateKeepAliveNameList()
})
setTimeout(() => {
if (theme.value.showProgressBar) VabProgress.done()
}, 200)
})
// onUnmounted(() => {
// $unsub('get-code')
// $unsub('reload-router-view')
// })
</script>
<template>
<router-view v-slot="{ Component }">
<transition
mode="out-in"
:name="theme.showPageTransition ? 'fade-transform' : 'no-transform'"
>
<keep-alive :include="keepAliveNameList" :max="keepAliveMaxNum">
<component
:is="Component"
:key="routerKey"
ref="componentRef"
/>
</keep-alive>
</transition>
</router-view>
</template>