Transition on router-view appears on pageload when router.beforeEach used

[exophunk]

Version

3.0.1

Reproduction link

https://codepen.io/exophunk/pen/vdYKjd

Steps to reproduce

A transition animation on <router-view> is supposed to only happen when the route changes, not already on the initial page load. In initial page load, it should only happen, when the "appear" attribute is present on the transition.

When a router.beforeEach() hook is used and next() is called asynchronously, the transition also happens on initial page load. This is not desired and I don't finde a way to prevent it.

• Is this an intended behaviour?
• I think the usage of the beforeEach hook should not affect the transition on pageload.

What is expected?

No transition on page load in any case

What is actually happening?

Transition on initial page load, but only when beforeEach() hook is used with async callback.

[posva]

Unfortunately, this is working as expected because your starting component is no component at all, therefore it applies the transition when a new component arrives (exactly as using v-if and delaying the display of the component)

If you want your component to not do an initial transition at the beginning, you should push before setting up the hook.
If you have some asynchronous checks, like an auth going on, you can dynamically change the name of the transition the first time the user logs in so it doesn't apply any transition.

Either case, if you have an async function taking some time, I think the transition makes total sense.

Nonetheless, I agree that, in the context of vue-router, you could expect appear to also affect the router-view component. So, let's open a discussion here

[chasebank]

I think a work-around might be using a transition-group? That seems to have done the trick for me, but I wasn't using a beforeEach hook, so the root cause may be different.

At first I tried purposely enabling appear and setting an appear-active class, with no transition, but that wasn't working. Then I tried changing to a transition-group, and that solved the problem entirely, even after removing the appear options.

This was definitely confusing and unexpected IMO. But at least it appears not too many people have an issue with it 😅

EDIT: Nevermind... I didn't realize that actually broke a few things. I believe because the transition-group key is reactive, and I can't figure out how to decouple it to some other property.

[posva]

It's possible to wait for the router to finish the initial navigation before mounting:

const app = new Vue({
    router
})

router.onReady(() => app.$mount('#app'))

That way, the transition won't trigger initially (unless appear is provided to transition)