Vue nested router-view leave transition doesn't run

user_590593 0
Viewed 512

I have a parent route with a nested child route.

The router-view in the parent route (that the child loads into) is wrapped in a transition. My understanding is that this should transition the child in and out when entering/leaving the route.

Neither transition happens by default. Adding an appear prop to the transition fixes the enter transition, but not the leave.

Is this specific to the fact that it's a nested route? If so, is there a best practice for working around it?

Here is a reduced test case: https://stackblitz.com/edit/vue-y6bbb6?file=src%2Fviews%2FParent.vue – click the 'child' and 'parent' links at the top of the page.

vue-router4 vue-router vue-transitions vuejs3 vue.js
2 Answers

Transitioning routes is just transitioning between components that belong to the same group of routes (root routes, child routes). Another way of imagine this is that every component that will be rendered between the same router-view will be transitioned.

In your case, you've registered only one child route, that means that It won't transition between any other route since there is one only. Thought, you transition your child route in initial render by applying appear.

Also, applying :mode when using transition component in router-view is best practice since by default entering and leaving transition happens simultaneously. Usually, this avoids flickering layout.

You could see an example here: https://stackblitz.com/edit/vue-pkup3g?file=src/views/Parent.vue

Just forked your project and added some additional code.

user_77235570

Remove transition key in your app.vue

<router-view v-slot="{ Component}">
  <component :is="Component"   />
</router-view>
user_115320120
Related