vue3 router4 router-view transition keep-alive用法

<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属性控制，可以实现不同路由使用相同组件，否则不会切换