Route with same component not triggering transition

[mika76]

Version

4.0.4

Reproduction link

https://jsfiddle.net/mika76/1g2xn7j3/

Steps to reproduce

Using transitions with routes as per https://next.router.vuejs.org/guide/advanced/transitions.html#transitions but transitions do not kick in if the component is the same. I've tried putting a :key on the router-view but it has not helped. Maybe some guidance on how this could be done in the docs?

What is expected?

Transition should kick in on any route change

What is actually happening?

transition does not kick in if the component is the same (even if path is different)

[posva]

You need a key on the component only:

  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" :key="$route.path"/>
    </transition>
  </router-view>

A PR to docs adding an example at the top is welcome!

[davidwebca]

Adding a comment because someone is bound to stumble into this, but with the direct child of transition must be the one with the key. If you refactor your code with the new Suspense component, the Suspense component is the one that needs to have the key otherwise your transition will have a flash when the mount/unmount cross over. 👍

<router-view v-slot="{ Component, route }">
    <transition @before-enter="beforeEnterPage" @enter="enterPage" @before-leave="beforeLeavePage" @leave="leavePage" :css="false" appear>
        <!-- Key needs to be on the direct child of <transition> -->
        <Suspense @pending="enterLoading" @resolve="leaveLoading" :key="$route.path">
            <component :is="Component" />
        </Suspense>
    </transition>
</router-view>