Vue uses hop routing to switch content, and vue transition animation cannot be used. How can we make this animation work?

I used v-if to switch, so I can use transition animation.
now the leader asked me to switch to a routing method, resulting in the invalidation of transition animation. How should I deal with this situation?


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


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

}
}

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7b1b65-8244.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7b1b65-8244.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?