还在坑中。。。vue项目中，页面第二次刷新时，document.documentElement.scrollTop失效

问题描述

需求需要从第三方页面进入页面时，会带一个table字段，然后根据table字段，定位到指定位置。将滚动操作写在mounted函数中，发现进入页面时能成功定位，但是一刷新页面，滚动就失效了。

mounted(){
	let { tab='' } = this.$route.query;
	let top = document.getElementById(tab).offsetTop;
	document.documentElement.scrollTop = top;
	console.log(document.documentElement.scrollTop);
}

每次document.documentElement.scrollTop都能正常打印，但是进入页面后，将页面进行滚动，此时刷新页面，并不能正常定位。

问题定位

使用setTimeout进行定位后，发现，如果document.documentElement.scrollTop操作是在所有js加载完成后执行的话，则页面能够正常滚动。那就很可能vue打包后的js文件，也执行了滚动操作。然后找资料的时候，果然看到了这么一句话：
在Vue项目中，访问过的页面，在滚动到某个位置后，再次刷新页面，页面仍处于上次访问过的位置。

解决问题

那现在我们需要直接刷新页面时，实现自己的滚动效果要怎么做呢？首先，在vue-router中发现一个scrollBehavior方法：

export default new Router({
  routes: [{...}],
  scrollBehavior(to, from,savedPosition) {
    return {
      x: 0,
      y: 0
    }
  }
})

经过测试，发现scrollBehavior方法只会在从一个页面进入另一个页面时才会执行，如果只是刷新当前页面，它是不会执行的。所以，最后使用了最暴力的方法，直接设置setTimeout：

setTimeout(function(){
	let { tab='' } = this.$route.query;
	let top = document.getElementById(tab).offsetTop;
	document.documentElement.scrollTop = top;
}, 500);

不过这样并不能保证所有的js已经加载了。
暂时还没有找到vue需要这种默认行为的方法。