Vue nested router-view leave transition doesn't run

Question

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.

Lucas David Ferrero · Accepted Answer · 2021-11-17 12:35:28Z

1

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.

answered Nov 17, 2021 at 12:35

Lucas David Ferrero

1,98219 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

davidpmccormick Over a year ago

Ah ok that makes sense, thanks. So what would be the way to apply a transition before the child route was going to disappear (i.e. make sure the 'child' routes fade out when navigating to the 'parent' route)?

davidpmccormick Over a year ago

…although @lucas, the leave transition still doesn't appear to run in your fork (the mode="out-in" doesn't have any effect – each child route immediately disappears and only the enter fade-in runs).

Lucas David Ferrero Over a year ago

Hi David, reviewing your stackblitz I realize that you're using <component> in your App.vue. There is no need to use it there since you're not animating your root routes. Removing it solves the problem, you could check out my forked stackblitz to see it.

davidpmccormick Over a year ago

Interesting! I'm not animating anything in the root routes in the test case, but I would still like to be able to animate these in my app for real. How can I accomplish both?

davidpmccormick Over a year ago

I think setting the key on the <router-view /> itself rather than on the <component :is="Component" /> within the <router-view> was the root of the issue.

|

Amir · Accepted Answer · 2022-07-03 16:07:03Z

1

Remove transition key in your app.vue

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

answered Jul 3, 2022 at 16:07

Amir

3141 gold badge3 silver badges7 bronze badges

Collectives™ on Stack Overflow

Vue nested router-view leave transition doesn't run

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related