vue3如何实现路由动画？

---

先在App.vue中写上

<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition">
    <component :is="Component" />
  </transition>
</router-view>

然后App.vue上的样式为

.fade-enter-from,
.fade-leave-to {
    
    
  /*定义进入开始和离开结束的透明度为0*/
  opacity: 1;
}

.fade-leave-to {
    
    
  transform: translateX(-100%);
}

.fade-enter-to {
    
    
  transform: translateX(0);
}

.fade-enter-to,
.fade-leave-from {
    
    
  /*定义进入结束和离开开始的透明度为1*/
  opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
    
    
  transition: all 0.5s ease-out;
}

.defa-enter-from,
.defa-leave-to {
    
    
  /*定义进入开始和离开结束的透明度为0*/
  opacity: 1;
}

.defa-leave-to {
    
    
  transform: translateX(100%);
}

.fade-enter-to {
    
    
  transform: translateX(-100%);
}

.defa-enter-to,
.defa-leave-from {
    
    
  /*定义进入结束和离开开始的透明度为1*/
  opacity: 1;
}

.defa-leave-active,
.defa-enter-active {
    
    
  transition: all 0.5s ease-out;
}

最后在

router的index.js写以下代码

router.beforeEach((to, from) => {
    
    
  var routlist = []
  routes.forEach(item => {
    
    
    routlist.push(item.path)
  })
  routlist.forEach((item, index) => {
    
    
    if (from.path == item) {
    
    
      if (routlist.splice(index).includes(to.path)) {
    
    
        to.meta.transition = "fade"
      } else {
    
    
        to.meta.transition = "defa"
      }
    }
  })
})