代码语言：javascript复制
<template>
<router-view v-slot="{Component}">
<transition name="view" mode="out-in">
<keep-alive :include="keepAliveComponentNames">
<component
:is="Component"
:key="$route.fullPath"
/>
</keep-alive>
</transition>
</router-view>
</template>
<script>
export default {
setup() {
return {
// 需要缓存的组件名
keepAliveComponentNames:['compa','compb','compc']
}
}
}
</script>
<style>
.view-enter-active {
animation: view-ani var(--el-transition-duration);
}
.view-leave-active {
animation: view-ani reverse var(--el-transition-duration);
}
@keyframes view-ani {
from {
opacity: 0;
}
}
</style>注：在component上通过key属性控制，可以实现不同路由使用相同组件，否则不会切换
