为了让项目在页面切换时不那么死板，我是用了transition组件并加入淡出淡出效果，然而切换页面我发现居然每次跳一下。

其实就是上个路由的占位导致，百度后说隐藏消失的页面让其不占位。

解决方案

fade-leave-to路由添加display:none;

注意:

fade-leave-to 是v-leave-to的别名，即是name="fade",可填写自己所命名;

1
2
3
4
5
6
7
8
9
10
11
12
13
.app-main-enter-active,
.app-main-leave-active {
  transition: opacity 0.5s ease;
}

.app-main-enter-from,
.app-main-leave-to {
  opacity: 0;
}
// 处理 transition 抖动问题 上一个页面离开时占位引起!
.app-main-leave-to{
    display: none;
}

vue3 中如果出现以下问题可以通过 @leave 回调函数来终止动画执行!
dashboard 切换 组件按钮 菜单时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <div class="app-main">
        <router-view v-slot="{ Component }">
            <!-- appear 开始执行一次动画 -->
            <transition name="app-main" appear @leave="onLeave">
                <component :is="Component" />
            </transition>
        </router-view>
    </div>
</template>

<script setup name="AppMain">
/* 
    解决路由动画切换时上一个页面动画未结束时，下一个页面出现时，出现卡动问题!
*/
function onLeave( el, done ){
    // 离开时结束当前动画
    done();
}
</script>