Vue Router搭配transition使用时第二次路由跳转页面空白问题

问题根因 #

1. 动态组件未绑定唯一key：transition的out-in模式需要依赖key区分不同组件，执行「先销毁旧组件、再渲染新组件」的逻辑。你当前代码中的<component>未绑定key，transition会误判两个路由组件为同一组件，旧组件销毁后不会触发新组件的渲染流程，直接出现空白。
2. 路由路径不匹配：你路由配置中Home组件对应路径为/，但router-link的to属性写的是home，实际跳转路径为/home，若未配置重定向规则会出现路由匹配异常。
3. in-out模式生效的原因是该模式逻辑为「先渲染新组件、再销毁旧组件」，即使缺少key，新组件也会先挂载覆盖旧组件，所以不会出现空白，仅过渡效果不符合要求。

修复方案 #

第一步：修改App.vue，给动态组件绑定唯一key #

优先使用路由的完整路径作为key，保证路由切换时key一定会变化：

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

第二步（可选）：修正路由配置，统一Home路径 #

如果你需要Home页的访问路径为/home，可以在路由配置中增加根路径重定向规则：

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

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

修改完成后out-in模式的过渡效果即可正常生效，不会再出现路由切换后空白的问题。

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