Vue路由切换后, 页面滚动位置不变BUG处理

问题描述: 在路由a的时候，滚动页面到x的位置，此时直接跳转路由b，会发现b页面竟然页停留在x的位置！
解决方案①:监听路由
直接在app.vue监测路由变化, 让body的滚动距离scrollTop=0/ scrollTo(0,0)

export default {
	watch: {
		$route: function(to, from) {
		     window.scrollTo(0,0);
			//document.body.scrollTop = 0;
            //document.documentElement.scrollTop = 0;
		},
	},
};

解决方案②:全局路由守卫
全局后置路由守卫, 离开当前路由时执行

router.afterEach((to,from,next) => {
   window.scrollTo(0,0);
});

解决方案③:vue-router的滚动行为

注意 : 这个功能只在支持 history.pushState 的浏览器中可用。
**步骤 :在router实例中, 添加一个scrollBehavior方法, 自定义路由切换时页面如何滚动

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
     return { x: 0, y: 0 } // return的结果, 就是 期望滚动到哪个的位置
  }
})

scrollBehavior方法解释
scrollBehavior 方法接收 to 和 from 路由对象。参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用, 记录滚动条的坐标。
如果返回一个 false的值，或者是一个空对象，那么不会发生滚动.

scrollBehavior(to,from,savePosition){ //点击浏览器的前进后退或切换导航触发
    console.log(to); //要进入的目标路由对象  要去向哪里
    console.log(from); //离开的路由对象  从哪里来
    console.log(savePosition); //记录滚动条的坐标，点击前进后退的时候记录值
}