mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-06 03:57:49 +08:00
59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<template>
|
||
<!-- 这是一个魔法注释，删不的（如果删了会出现一个异常提示，不信你试试） -->
|
||
<RouterView v-slot="{ Component, route }">
|
||
<template v-if="Component">
|
||
<Transition
|
||
:name="transitionPropName"
|
||
:mode="transitionMode"
|
||
:appear="transitionAppear"
|
||
>
|
||
<Suspense>
|
||
<KeepAlive
|
||
v-if="setupKeepAlive"
|
||
:max="maxKeepAliveLength"
|
||
:include="keepAliveInclude"
|
||
:exclude="keepAliveExclude"
|
||
>
|
||
<Component :is="Component" :key="route.fullPath" />
|
||
</KeepAlive>
|
||
<Component :is="Component" v-else :key="route.fullPath" />
|
||
</Suspense>
|
||
</Transition>
|
||
</template>
|
||
</RouterView>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { useKeepAlive } from '@/store'
|
||
import { APP_KEEP_ALIVE } from '@/appConfig/appConfig'
|
||
|
||
import type { PropType } from 'vue'
|
||
|
||
/**
|
||
*
|
||
* 使用宏编译模式时，可以使用 defineOptions 声明组件选项
|
||
* 常用方法即是声明该组件的 name inheritAttrs 等属性
|
||
*/
|
||
defineOptions({
|
||
name: 'TransitionComponent',
|
||
})
|
||
|
||
defineProps({
|
||
transitionPropName: {
|
||
type: String,
|
||
default: 'fade',
|
||
},
|
||
transitionMode: {
|
||
type: String as PropType<'default' | 'out-in' | 'in-out' | undefined>,
|
||
default: 'out-in',
|
||
},
|
||
transitionAppear: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
})
|
||
|
||
const keepAliveStore = useKeepAlive()
|
||
const { keepAliveInclude } = storeToRefs(keepAliveStore)
|
||
const { setupKeepAlive, maxKeepAliveLength, keepAliveExclude } = APP_KEEP_ALIVE
|
||
</script>
|