Vue3路由切换过渡失效问题：仅首页（/）效果异常

问题现象 #

• 首页（路径/）路由切换时过渡效果完全失效
• 切换至AboutUs页面并刷新后，除返回首页外，其他页面间切换过渡正常
• 从Contact页面返回首页时过渡失效
• 刷新首页时无过渡效果

当前实现代码 #

根组件路由过渡部分 #

<router-view v-slot="{ Component }">
     <transition name="fade" mode="out-in">
            <component :is="Component" />
     </transition>
</router-view>

过渡样式（style.css） #

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

根组件完整代码 #

<script>
    import HeaderTop from './pages/partials/header_top.vue'
    import HeaderMiddle from './pages/partials/header_middle.vue'
    import MainNavbar from './pages/partials/main_navbar.vue'
    import MainFooter from './pages/partials/footer.vue'

    export default {
        components: {
            HeaderTop,
            HeaderMiddle,
            MainNavbar,
            MainFooter
        }
    }
</script>
<template>
    <!-- Header start -->
    <header class="header_wrap">
        <div class="header-top">
            <HeaderTop></HeaderTop>
        </div>
        <div class="header-middle">
            <HeaderMiddle></HeaderMiddle>
        </div>
        <div class="header-bottom">
            <MainNavbar></MainNavbar>
        </div>
    </header>
    <!-- Header end -->

    <!-- Content start -->
    <main role="main">
     
        <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
                <component :is="Component" />
            </transition>
        </router-view>

    </main>
    <!-- Content end -->

    <!-- Footer start -->
    <footer id="main-footer">
        <MainFooter></MainFooter>
    </footer>
    <!-- Footer end -->
</template>

修复方案 #

步骤1：给动态组件绑定路由唯一标识 #

修改路由视图部分，给<component>添加基于route.fullPath的key属性，强制每次路由变化时重新渲染组件，触发过渡：

<router-view v-slot="{ Component, route }">
     <transition name="fade" mode="out-in">
            <component :is="Component" :key="route.fullPath" />
     </transition>
</router-view>

步骤2：启用初始渲染过渡（可选） #

如果需要刷新首页时也显示过渡效果，给<transition>添加appear属性：

<router-view v-slot="{ Component, route }">
     <transition name="fade" mode="out-in" appear>
            <component :is="Component" :key="route.fullPath" />
     </transition>
</router-view>

原因说明 #

• Vue默认会复用相同组件实例，当从其他页面返回首页时，首页组件实例未被销毁重建，导致<transition>无法触发过渡动画。绑定route.fullPath作为key后，每次路由变化都会创建新的组件实例，确保过渡逻辑执行。
• appear属性用于启用组件初始渲染时的过渡效果，解决刷新首页无过渡的问题。

内容的提问来源于stack exchange，提问作者Ivan