在切换路由时候，上个页面有高度，切换到下个页面样式错乱

Question

     就是这样每次切换路由都会先看到之前的页面把当前路由的页面顶下来
        <transition name="fade">
            <router-view></router-view>
        </transition>
        
        

样式
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to / .fade-leave-active below version 2.1.8 / {
opacity: 0;
}

Answer 1

<transition name="fade" mode="out-in">
    <router-view>
    </router-view>
</transition>   
多重动画就可以

Answer 2

用了 transition 的话，在切换路由的时候，两个页面会同时存在于文档中，所以出现你说的现象。
让他们层叠起来就好了呗。

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
  
  position: absolute;
  top: 0;
  left: 0;
}

Answer 3

我也遇到这问题了,我查到可以在路由那边做设置:

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    return {
      x: 0,
      y: 0
    }
  }
})