 
<template> 
    <router-view v-slot="{ Component }">
        <transition name="fade-slide">
            <keep-alive>
                <component :is="Component"></component>
            </keep-alive>
        </transition>
    </router-view> 
</template>
<script //type>
import { defineComponent, onMounted } from 'vue'  
export default defineComponent({
name: 'Page',   
})
</script>
<style scoped> 

.fade-slide-enter-active {
  transition: all 0.3s;
 
} 
.fade-slide-leave-active{
    /* transition: all 0.3s; */
    opacity: 0;
}
.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
   position: absolute;
  top: 0;
  left: 0;
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
  position: absolute;
  top: 0;
  left: 0;
}
</style>
