路由原理解析：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() 导航守卫会是一个不错的选择：