Version

3.0.1

Reproduction link

https://jsfiddle.net/ta5128rw/

Steps to reproduce

• Click go User Index
• Click Home

What is expected?

User Index (or rather the container) to fade out then Home to fade in

What is actually happening?

Content disappears and nothing can be displayed anymore

Coming from https://github.com/vuejs/vue-router-next/issues/537

When using a different transition mode, as the default one, you can clearly see that the leaving element is removed right away, without triggering the leaving transition.

The first wrapping router-view is not needed to reproduce the bug, it's only needed inside the Child component. The bug does not exist when no wrapping component (router-view) is used

Workaround

Wrap the nested router-view (inside Child component) with an element like a div

The suggested workaround using the router doesn't work for me. I have updated the original JSFiddle and created a Jist (I was having a few memory leaks at the time console logging the ALL of the hooks from transitions on JSFiddle). It randomly doesn't enter into components.

The workaround with using div as a wrapper on this seems to be ok. Is the router failing in this case because the transition hooks are not working correctly?

Thanks

I'd say this is expected behavior... since RouterView is indeed returning an array from its render function (thus becomes a fragment root).

What would fix is is changing RouterView's render function so that it returns a single root when possible: https://jsfiddle.net/yyx990803/myv5e6zd/