2

routes.js

const routes = [
    {
        path: "/",
        component: Home,
        meta: {
            title: 'Home'
        }
    },
    {
        path     : "/register",
        component: Register,
        meta: {
            title: 'Register'
        }
    },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

App.vue

<template>
<router-link to="home">Home</router-link>
<router-link to="register">Register</router-link>
            <router-view v-slot="{ Component }">
                <transition name='fade' mode="out-in">
                    <component :is="Component"></component>
                </transition>
            </router-view>
</template>

When I visit /home and click on the Register - it works. But once I try to go back to Home, it's clearly loading the component but it's blank white.

From then on switching between routes obviously switches components, but everything stays blank white until I refresh on any page - then it shows it.

When I remove the Transition from the router-view it starts working.

With the transition the only switch that is working is going from Home to Register. Then any switches just turn the page blank white.

I've tried with $router.push, router-link, $router.back() - all same result.

EDIT: I found out that not only removing the whole transition fixes it, but also changing from out-in to in-out. It doesn't look good with my design, but it shows the components fine.

OurBG
  • 507
  • 1
  • 8
  • 22
  • 1
    @huanfeng that would be a bummer, since if you want to use transitions with Vue3 you have to use a dynamic component, so I guess every person who has router transitions does it like that. I don't see any alternative – OurBG Oct 24 '21 at 13:13

2 Answers2

0

I tried the code you pasted, it works well...

Have you added any styles to make it work, if not please add the styles, i add styles like below:

<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-active {
  opacity: 0;
}
</style>
huan feng
  • 7,307
  • 2
  • 32
  • 56
  • Yes, those exactly are my styles. It works perfectly when you initially load it - and it works perfectly going from Home to Register. From then on switching any routes just keeps the page blank white, never shows anything. Just noticed this stops not only when I remove the transition, but also when I change it to "in-out" instead of "out-in", which unfortunately looks very bad. – OurBG Oct 24 '21 at 15:17
  • It works on my machine even when switching between the tabs. – huan feng Oct 24 '21 at 15:21
  • Have you solved the issue? – huan feng Oct 27 '21 at 09:23
0

The reason for this problem is that transition only supports a single element. The official document hints:

<Transition> only supports a single element or component as its slot content. 
If the content is a component, the component must also have only one single root element.

You can see a demo in this link: https://stackblitz.com/edit/vitejs-vite-gwfbmb?file=src%2FApp.vue

FreezeNow
  • 21
  • 2