CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
Alex T
Alex T

Reputation: 3754

Vue transitions do not work for router-view with reusable component

So I created component which in which I placed router-view only and based on the routes the component changes. Worth noting is that this is second router-view and the first one is placed in the App.vue component and transition work with that work (they work for all routes except those that are containted with the component below)

MainComponent.vue

<template>
<transition name="fade" mode="out-in">
     <router-view></router-view>
</transition>
</template>


<style>
.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>

Here is the route setup.

{
    path: '/main',
    name: 'main',
    component: () => import('../views/MainComponent.vue'),
    children: [
      {

        path: 'first',
        name: 'first',
        props: { titleName: "First",},
        component: () => import('../components/Component.vue')
      },
      {

        path: 'second',
        name: 'second',
        props: { titleName: "Second"},
        component: () => import('../components/Component.vue')
      },
      {

        path: 'third',
        name: 'third',
        props: { titleName: "Third"},
        component: () => import('../components/Component.vue')
      }
   ]
  }

Is there a special setup needed for the transitions to work with reusable component in <router-view>?

Upvotes: 4

Views: 1471

Answers (1)

Dan
Dan

Reputation: 63059

When you enter a route whose component you are already viewing, by default the component is reused, so there is no DOM transition triggered. Change your router-view to:

<router-view :key="$route.fullPath" />

The key attribute tells Vue to use a different instance of the component (instead of reusing the existing one) any time the key value changes. With $route.fullPath, that will be every time the route changes.

Upvotes: 6

Related Questions