路由动画切换白屏问题是怎么解决的、虽然加上position: absolute

1、定义的总的内容去CSS

.main {
  top: 50px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: linear-gradient(225deg, #cedcff 0%, #f4eaef 100%);
  font-family: "PingFang Medium";
}

2、引用

img


3、使用

img

img

img

解决vue动态添加路由后刷新页面白屏问题（超简单
借鉴下
https://blog.csdn.net/qq_51196135/article/details/124175263

添加一个最小高度试试，例如 min-height:100vh；
参考这篇文章：https://blog.csdn.net/AboyL/article/details/80617150

提供参考实例【vue中路由切换出现白屏的问题怎么解决】，链接：https://www.yisu.com/zixun/609222.html

你有一个状态没有监听到,导致动画断裂 试试这个动画库:官方推荐 https://cn.vuejs.org/v2/guide/transitions.html

npm install animate.css --save


import 'animate.min.css';

  <transition
    name="custom-classes-transition"
    enter-active-class="animated bounce"
    leave-active-class="animated bounceOutRight"
  >
      <router-view></router-view>
      <router-view class="view two" name="a"></router-view>
      <router-view class="view three" name="b"></router-view>
  </transition>

路由动画还是会出现白屏的情况，这通常是由于路由动画的渲染过程中，浏览器的渲染引擎没有及时渲染出路由切换的内容，导致出现白屏的情况。

解决方法：

1、在路由切换的时候，可以使用 v-show 指令来控制路由组件的显示和隐藏，这样就可以避免路由动画时出现白屏的情况。

2、在路由切换的时候，可以使用 CSS3 的 transition 属性来设置路由动画的过渡效果，这样就可以在路由切换的时候，浏览器的渲染引擎有更多的时间来渲染路由的内容，从而避免出现白屏的情况。

3、在路由切换的时候，可以使用 v-cloak 指令来控制路由组件的显示和隐藏，这样就可以在路由切换的时候，浏览器的渲染引擎有更多的时间来渲染路由的内容，从而避免出现白屏的情况。