1

路由.js

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

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

应用程序.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>

当我访问 /home 并单击“注册”时 -它可以工作。但是一旦我尝试回到主页，它显然正在加载组件，但它是空白的。

从那时起，在路由之间切换显然会切换组件，但在我刷新任何页面之前，一切都保持空白 - 然后它会显示出来。

当我从中删除转换时，router-view它开始工作。

随着过渡，唯一有效的开关是从 Home 到 Register。然后任何开关只会将页面变为空白。

我已经尝试过$router.push, router-link, $router.back()- 所有相同的结果。

编辑：我发现不仅删除整个过渡修复它，而且从更改out-in为in-out. 我的设计看起来不太好，但它显示的组件很好。

4

1 回答 1

0

我试过你粘贴的代码，它运行良好......

您是否添加了任何样式以使其正常工作，如果没有，请添加样式，我添加如下样式：

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

.fade-enter-from,
.fade-leave-active {
  opacity: 0;
}
</style>
于 2021-10-24T14:51:57.187 回答