Transition cause a route fail to load

Hi all bros,

I’m having trouble with transition. Here’s my code pen.

I created 2 tab components that based on a layout (HomeLayout) and a dependent LoginPage.

When use visit homepage, he will be redirect to Tab1 page, click login to visit login page, then the web page will automatically redirect to Tab1 page.

Here’s working code

<div id="app">
    <keep-alive>
        <router-view/>
    </keep-alive>
</div>

But adding transition tag makes the auto redirect after login not working as normal (the Tab1 page was not loaded after redirect from login process)

<div id="app">
    <transition name="fade" mode="out-in">
        <keep-alive>
            <router-view/>
        </keep-alive>
    </transition>
</div>

How could I overcome this problem, Pls show me a clue.

Thank in advance!

<keep-alive>
  <transition name="fade" mode="out-in">
    <router-view/>
  </transition>
</keep-alive>
1 Like

you should add a ‘v-if’ in the inner label which is around by label ,that means the transition label controlls the animation on the v-if tag but not the one without it

1 Like

Thank you so much for your help.

Based on your code, I’ve make some modification (new pen): adding more nest route with transition tag inside keep-alive tag (at HomeLayout component). But It’s seem having side-effect, the keep-alive did not work: when switch tab2 to tab1 and vice-versa, the Tab1/Tab2 component was re-created again and again.