Vue-router切换路由使用Transition达到过渡效果

router-view所在的组件代码

结构

<template>
  <div class="layout">
       <router-view v-slot="{ Component }">
      <Transition name="fade"> 
        <component :is="Component" ></component>
      </Transition>
    </router-view>
     </div>
</template>

过渡效果样式

//.fade
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}