Route transitions are always played, even without using appear

[NoelDeMartin]

Reproduction

https://play.vuejs.org/#eNqNVltv2zYU/iun6gA7WCS5btcHTXXTFcWyYZeiDfYy7YGWji02EqmRlOPA8H/fIambXacYijTiuXznOxce5hDUjIvoiw6SgNeNVAYOkCtkBt81DRxho2QNs12Ls0x0Bkq2BlWniWJ/HNXWr9expom8byYG1Dn9XGUCIGo1zr27P9eyFWY+e05us6vgOujciVtqsG4q8l9Zw7R8sbrFqpI22LM0pqMTN+4XfWijpNiu3rdKoegYQ8NMmaRxp4PDAb5zimjTVtVHUsLx6GBij5MKtusBPzmWv3FxD0a+yYI4C1Y/S/qGW1ljGo/6Jz3YmiSD2zt7+sovjfuYqe3LKdZfHB9gF+pKGsI7wHtJBRc2vyPBelMyfhaGcFcirNstcA0bvscCWs3FFkxJAi60QVZck4EBbmYahKSPusaCU4GrR5DrHZethjA8RU3vFBOaGy4F8eAbYjFwyAIQrEYSbViBdKplYU/EPOSC+J2gTYC+7dV7kE8+pJtwfRY6HqHjEbsvX1dlW7+uyl1x03gyVjRvfhYv3obfsZbq8ZZrQ7+uO6HHnd6ScLgNw32wA+Ja11+KXtDdjP7a2IE4sRsk4xWS1Ds/zRrewN82mYOfa5jFM6LV1yQZwx6vT83cHJ7ajrGt8T9noRSFmuY7P1hAGiVbiuRSfeZXLqYnSp9Hut6ZwL1LtMANa6sem6o+rYe96jpXvDHUkTMHF7ZGU8pCJ/4EsJV30tGfX/UicHMe+cutoqbV5bxP2+0Z6Gpi/6cbTyuhj0iH00VT8GEFlMtVz5Q2zrIX0y0yNMY3ecXzexrLgdD5VfeG3QB63Mn8UR1O+j0WAjSa1m6kcSKpc5RacXk9H+iy+05dD19PzuhZmwf7ORVqopuorKbXaWQqL+14dIz8aGxx0g1F7JXwMNG/LarHqHN7+xZmRKLvBqU595rR13dQIdUox/kBnD/1vo98BDtahOBn7P93cqj1tJUVW2M1bJLPLkQCKReUGy08u5uqyCheU5s9Abux2L5CsTUlCZeLYWWl8Yh2ud2+XWHNGlo4UlDDXdZZp9BZMAx5Foxts+IsKI1pdBLHrWjutxGVPx4tbl5FL6MFxdRmIo1Q1+FayQftNlwWuKJb7BsyigvcGSkrHbKGPxXiK8Ob19Hr6EVc8XVM6DEXBe4ddt8TStNompUN354laSeGV6j+bOymPk2W0cv+8KuTGdXiQDQvMb+/IP+i957yR4WU3Y4ekkFnmKJx9OoPn//APX0PSupoW5H1N5SfUMuqtRy92U+tKIj2xM6x/cX1jN7YO/1hb5AeoC4pS3SccddI+3A9lfpI92X0alJFbR4r1FGu7dNEfyNc09xx4f3WUhWoElg2eyCyvIDni8XiR7ctCY6LcC1p9dQJvFg0eydvWFEQ2UFCUTJBsLACBt/Tj9+13rvCDb0RU8tyOY08wo8E8jyfEEhgQf+WE4TIvvchPT7kznLDd7abXlgh22En9GHM8KInIBuWc/MIi+gHDcg0XkK0q+4Mj/aww+r8iZF1DI7/AQj3tSs=

Steps to reproduce the bug

Load the playground page, and notice how the initial route fades in.

Expected behavior

Since I'm not using the appear property in the transition, I didn't expect the initial route to animate.

Actual behavior

The initial page fades in, it shouldn't play the animation given that I'm not using appear in the transition.

Additional information

I have investigated this issue, and I could see why the bug is happening. The first time the page is loaded, the Component provided in the v-slot of the RouterView is undefined, so the Transition component is loaded without any component first. Then, the route component is loaded and the enter transition is triggered.

Keeping that in mind, this issue can be fixed doing the following (adding v-if="Component" to the example in the docs):

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

However, I think it's very unintuitive. Maybe the RouterView component should avoid rendering anything inside of the slot until the router bootstrapping has been completed?

Otherwise, if you don't think this is a bug, I think we should at least add a warning note in the documentation mentioning this (I can open a PR myself if you want).

[posva]

Your investigation is correct. You can avoid it by awaiting router.isReady() before mounting.
Feel free to open a PR or comment in the discussion about docs!