39 lines
823 B
Vue
39 lines
823 B
Vue
<template>
|
|
<router-view v-slot="{ Component,route }">
|
|
<keep-alive :include="include" :exclude="excludes">
|
|
<transition name="fade-slide" mode="out-in">
|
|
<component :is="Component" :key="route.path" class="w-screen h-screen"/>
|
|
</transition>
|
|
</keep-alive>
|
|
</router-view>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { excludes } from '@/router/keepAlive'
|
|
|
|
const include:string[] = []
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 过渡动画：左右滑动并且淡入淡出 */
|
|
|
|
.fade-slide-enter-active, .fade-slide-leave-active {
|
|
transition: transform 1s ease, opacity 1s ease;
|
|
}
|
|
|
|
/* 进入动画：从右侧进入 */
|
|
.fade-slide-enter {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 离开动画：从左侧离开 */
|
|
.fade-slide-leave-to {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
</style>
|