vue-router transition 简单切换效果

 route.meta.transition 用来处理不同的路由使用不同的动画

但是需要我们定义好动画样式  比如  route.meta.transition = aa     则定义样式  .aa-enter-active    .aa-enter-from  .aa-enter-to 等样式

route.meta.transition || 'fade' 路由中没有定义meta 属性的 transition 属性 则使用fade动画
总共有6中样式

enter-active 路由进入过程  包括 enter-from  enter-to

eave-active 路由离开过程、  包括 leave-from leave-to
上面两个定义动画效果
下面的定义 开始和结束的状态

enter-from 开始进入

enter-to   进入完成

leave-from  开始离开

leave-to   离开完成

<!--  vue-router 3的写法  -->
<transition :name="$route.meta.transition || 'fade'">
  <router-view></router-view>
</transition>
<!--  vue-router 4的写法  -->
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component"></component>
  </transition>
</router-view>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease 0s;
}

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

.fade-leave-from,
.fade-enter-to {
  opacity: 1;
}
</style>