1

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.

davidpmccormick
  • 198
  • 1
  • 12

2 Answers2

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.

Lucas David Ferrero
  • 1,630
  • 14
  • 40
  • 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 Nov 17 '21 at 12:42
  • …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). – davidpmccormick Nov 17 '21 at 13:36
  • 1
    Hi David, reviewing your *stackblitz* I realize that you're using `` 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. – Lucas David Ferrero Nov 17 '21 at 19:03
  • 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 Nov 17 '21 at 19:40
  • I think setting the `key` on the `` itself rather than on the `` within the `` was the root of the issue. – davidpmccormick Nov 18 '21 at 09:14
  • Another fork with the behaviour I was after: https://stackblitz.com/edit/vue-rwnvsv?file=src%2FApp.vue – davidpmccormick Nov 18 '21 at 10:55
1

Remove transition key in your app.vue

<router-view v-slot="{ Component}">
  <component :is="Component"   />
</router-view>
Amir
  • 284
  • 1
  • 3
  • 7