Vue Router：页面刷新及同路由锚点跳转时禁用过渡动画

我们可以通过动态控制过渡动画的启用状态来实现需求，核心思路是基于路由跳转的场景判断是否渲染过渡组件，具体实现如下：

1. 修改主页面模板代码 #

替换你现有<main>内的代码，新增路由状态判断逻辑：

<template>
    <main>
        <RouterView #="{ Component }">
            <!-- 根据判断结果决定是否启用过渡动画 -->
            <transition v-if="shouldAnimate" mode="out-in" name="fade">
                <component :is="Component" :key="$route.fullPath" />
            </transition>
            <!-- 不满足动画条件时直接渲染组件 -->
            <component v-else :is="Component" :key="$route.fullPath" />
        </RouterView>
    </main>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted, computed } from 'vue';

const route = useRoute();
const router = useRouter();

// 标记是否是页面首次加载（刷新场景）
const isFirstLoad = ref(true);

onMounted(() => {
    // 页面加载完成后标记为非首次加载
    isFirstLoad.value = false;
});

// 计算是否需要启用过渡动画
const shouldAnimate = computed(() => {
    // 场景1：页面刷新时禁用动画
    if (isFirstLoad.value) return false;

    const from = router.currentRoute.value;
    const to = route;

    // 例外情况：从searchRecipes路由跳转到带#about的home路由，保留动画
    if (from.name === 'searchRecipes' && to.name === 'home' && to.hash === '#about') {
        return true;
    }

    // 场景2：同路由内锚点跳转时禁用动画
    if (from.name === to.name && to.hash) {
        return false;
    }

    // 其他路由切换场景启用动画
    return true;
});
</script>

<style lang="scss">
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}
</style>

2. 其他代码无需修改 #

你的路由配置、路由链接、路由列表代码保持原样即可，已经能配合上面的逻辑正常工作：

• 路由链接的to="{ name: 'home', hash: '#about' }"会触发路由判断
• scrollBehavior里的锚点滚动逻辑不受影响

逻辑说明 #

• 页面刷新禁用：通过isFirstLoad变量标记首次加载状态，组件挂载后切换为false，确保刷新时直接渲染组件，不触发过渡。
• 同路由锚点跳转禁用：判断跳转前后的路由名称一致且目标带有hash，此时禁用动画；但如果是从searchRecipes跳转到带#about的home路由，则例外保留动画。
• 其他路由切换：所有不同路由之间的跳转（包括带锚点的跨路由跳转）都会正常触发过渡动画。

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