1<!-- App.vue -->
2<router-view v-slot="{ Component }">
3 <transition name="slither" mode="in-out">
4 <component :is="Component"></component>
5 </transition>
6</router-view>
1// then, in the parent component,
2// watch the `$route` to determine the transition to use
3watch: {
4 '$route' (to, from) {
5 const toDepth = to.path.split('/').length
6 const fromDepth = from.path.split('/').length
7 this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
8 }
9}
10