1、实现路由过渡动画
本人为了实现路由过度的动画效果,在网上查阅了很多,发现他们的教程版本可能很低,很难实现动态路由下新旧组件的过渡动画。
研究半天,才明白是因为未绑定key值,所以旧组件未产生缓存,而是直接消失。所以呈上代码:
<template>
<transition :name="transitionName">
<router-view class="child-view" :key="key"></router-view>
</transition>
</template>
computed:{
key(){
return this.$route.fullPath
}