54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<el-main>
|
|
<router-view v-slot="{ Component }">
|
|
<transition name="route-fade" mode="out-in" appear>
|
|
<keep-alive :include="cachedViews">
|
|
<component :is="Component" />
|
|
</keep-alive>
|
|
</transition>
|
|
</router-view>
|
|
</el-main>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useCacheStore } from '@/stores/cache';
|
|
// 绑定动态缓存列表
|
|
const cacheStore = useCacheStore()
|
|
const cachedViews = cacheStore.cachedViews
|
|
</script>
|
|
<style scoped lang="scss">
|
|
/* 过渡动画的 CSS 类（前缀和 Transition 的 name 一致） */
|
|
/* 进入动画开始 */
|
|
.route-fade-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
/* 可选：从右侧滑入 */
|
|
}
|
|
|
|
/* 进入动画结束 */
|
|
.route-fade-enter-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.route-fade-enter-to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* 退出动画开始 */
|
|
.route-fade-leave-from {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* 退出动画结束 */
|
|
.route-fade-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.route-fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
/* 可选：向左侧滑出 */
|
|
}
|
|
</style>
|