VueJS Router：判断首次页面加载以切换/禁用页面过渡效果

其实Vue本身并没有提供一个专门仅在首次页面加载后触发一次的生命周期钩子，但我们可以通过路由特性或全局状态标记的方式，轻松区分「浏览器地址栏直接输入的首次加载」和「页面内router-link跳转」这两种场景，进而应用不同的过渡效果。

方案一：利用路由守卫的from参数判断 #

这是最简洁的方法——首次加载页面时，路由守卫中的from参数会是undefined；而通过router-link跳转时，from会包含上一个路由的信息。我们可以基于这个差异来切换过渡效果：

<template>
  <!-- 根据状态动态绑定过渡名称 -->
  <transition :name="currentTransition">
    <router-view />
  </transition>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const currentTransition = ref('first-load');

// 监听路由跳转完成事件
router.afterEach((to, from) => {
  // 首次加载时from为undefined，否则是路由跳转
  currentTransition.value = from ? 'route-jump' : 'first-load';
});
</script>

<style scoped>
/* 首次加载的过渡效果 */
.first-load-enter-active,
.first-load-leave-active {
  transition: opacity 0.8s ease;
}
.first-load-enter-from,
.first-load-leave-to {
  opacity: 0;
}

/* 路由跳转的过渡效果 */
.route-jump-enter-active,
.route-jump-leave-active {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.route-jump-enter-from {
  transform: translateX(100%);
}
.route-jump-leave-to {
  transform: translateX(-100%);
}
</style>

方案二：全局状态标记首次加载完成 #

如果需要更灵活的控制（比如在其他组件也需要判断首次加载状态），可以用全局变量或状态管理工具（如Pinia/Vuex）来标记：

步骤1：初始化全局标记 #

在main.js中添加全局变量：

// 标记是否为首次加载
window.isFirstPageLoad = true;

步骤2：在App.vue中更新标记并切换过渡 #

<template>
  <transition :name="currentTransition">
    <router-view />
  </transition>
</template>

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

const router = useRouter();
const currentTransition = ref('first-load');

onMounted(() => {
  // 页面首次挂载完成后，将标记设为false
  window.isFirstPageLoad = false;
});

router.afterEach(() => {
  currentTransition.value = window.isFirstPageLoad ? 'first-load' : 'route-jump';
});
</script>

<!-- 样式部分和方案一一致，这里省略 -->

原理说明 #

• 首次加载时：App.vue会经历完整的生命周期（created→mounted），此时路由的from参数为空，全局标记也为true，我们可以对应应用首次加载的过渡效果。
• 路由跳转时：App.vue不会重新挂载，只是router-view切换组件，此时from参数有值，全局标记也已设为false，自动切换为路由跳转的过渡效果。

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