vue路由跳转时页面上下抖动问题解决

问题：路由切换跳转到一个页面然后会发现这个页面的布局会先向下闪一下，然后向上闪一下停住。虽然不影响使用，但是看着非常膈应。

原因：其实就是因为路由跳转时有过度效果导致的在跳转的时候上一个路由还占着位置，所以把你布局顶下去了，然后页面跳转完了之后他占位消失，你的布局恢复原状。但是这样虽然只有一秒不到的时间，也造成了布局上下闪了一次，看着就很难受。所以我们想的办法也很简单，就是让他上一个路由消失的时候别占着位置顶我下一个路由的布局不就好了。

解决办法

在你的css中找到fade-leave-to这个属性，然后加 display: none;让跳转的页面不占位就行了。

.fade-leave-to {
  display: none;
}