vue页面切换时滚动条会记录之前的位置

前言

该问题最终是由页面过渡导致的，没有使用过渡效果的小伙伴应该是有其他原因，加油吧。。。。。

问题描述

A页面下拉到距离页面顶部200px位置处，然后切换到B页面，
结果滚动条依然在距离顶部200px处。
将在A页面的滚动条位置记录了下来。

寻找问题思路

因为在逻辑上并没有对页面做滚动行为相关的处理，所以首先排除业务代码的嫌疑，
那么问题很有可能就是在直接处理页面切换时造成的，暂时先将vue的过渡取消试一下

取消vue的过渡后

页面果然没有这个问题了，那么定位到了问题，这个问题就已经被修复了百分之五十了，接着继续分析。

这个是具体的过渡效果：（相信大家都是对vue很熟悉了，不熟悉过渡的小伙伴可以自己对照官网看一下）

 // 元素插入之前
    .fade-enter {
        opacity: 0;
    }
    // 离开过度的结束状态
    .fade-leave-to {
        opacity: 0;
    }
    // 进入过渡的结束状态
    .fade-enter-to {
        opacity: 1;
    }
    // 进入过渡生效时的状态,只在过渡过程中应用
    .fade-enter-active {
        transition: all .3s ease-out .5s;
    }
    // 离开过渡生效时的装药，只在过渡过程中应用
    .fade-leave-active {
        transition: opacity .3s;
    }

调试：

打开控制台，抓取到过渡的最外层元素，在页面切换时观察dom的变化过程。

结果：

虽然从过渡的代码上来看，两个页面之间的切换是无缝衔接的，但实际上在整个过程中，vue是控制样式来进行页面切换，所以页面会有短时间的共存的现象，这也就导致了第二个页面记录下了前一个页面滚动条的位置。

解决方案：

实际上解决问题的方法和我们刚才分析出的问题关系不大，在我们定位到是过渡产生的问题时就能去着手解决了。

使用vue过渡的钩子函数：afterEnter(进入过渡状态结束时)

afterEnter() {
    if (window.scrollY != 0) {
        window.scroll(0, 0)
    }
}

在进入过渡状态结束时将滚动条设置致顶即可。

测试后可以完美解决问题