vue中使用跳路由的方式切换内容，无法使用vue的transition动画。怎么样才能让这个动画

Question

我之前是使用v-if实现切换的，这样可以使用transition动画，现在领导让换成了转路由的方式来切换，导致transition动画失效了，这种情况我该怎么处理。

Answer 1

<transition :name="transitionName">

<router-view class="child-view"></router-view>

</transition>

添加watch:

watch:{

'$route':function(to,from){

//添加路由切换过渡动画

const toDepth = to.path.split('/').length

const fromDepth = from.path.split('/').length

this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'

}

}

Answer 2

<transtion name="slide-fade">

<router-link to="/"></router-link>

<transtion>