Route transition effect should be set on the router-view of App.vue

< transtion name= "slide-fade" >

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

< transtion >

< transition: name= "transitionName" >

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

< / transition >

add 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'

}
}