路由原理解析：vue-router 组件的 scrollBehavior解决问题:页面的滚动会影响到其他页面

vue对访问记录的管理
当用户进入一个页面的时候，会往 history 栈中放入当前的记录，对页面级别的操作通过操作内置对象 history 可以满足一些需求。

vue 路由跳转就是通过对 history.pushState() 和 history.replaceState() 方法的模拟来实现，会往 history 栈中存放一条记录，这也是为什么 vue 的 router.push 方法只能在支持 history.pushState() 方法的浏览器中使用，当调用 router.go() 或者 router.back() 方法的时候就和 history.go()、history.back() 效果一样，都是对 history 栈中的记录进行访问，上述行为与通过浏览器的回退和前进效果也是一样。

但是，在不加处理的情况下，组件的滚动行为会跟我们想象的不同。

为什么有的页面的滚动会影响到其他页面
为基于SPA模式开发，所以页面仅有一个，实现页面切换是利用哈希与组件的映射关系，vue-router 是通过哈希来模拟完整的 url，但是对于页面来说仍是一个 url，所以在任何一个组件滚动页面，切换到其他组件的时候，页面仍保持滚动之前的状态，这就是出现上述现象的原因。

如果你是想简单粗暴的在每次切换组件的时候让页面回到顶部，router.beforeEach() 导航守卫会是一个不错的选择：

 router.beforeEach((to, from, next) => {
        // 让页面回到顶部
        document.documentElement.scrollTop = 0
        // 一定不要忘记调用 next()
        next()
    })

参考文档：

1. vue 组件的 scrollBehavior
2. mdn有关浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存
3. vue-router官网对于vue-scroll-behavior的解释