Vue页面跳转this.$router.push({})后滚动条不能滚动到最上边的问题修复

问题描述

点击跳转后，滚动条与跳转前的位置相同，不能返回到最上边。

goto() {
	this.$router.push({
        path: '/xxxx',
      })
}

尝试修改（未能实现）

通过查找资料发现有如下方式进行操作。

1. 在全局router.js中添加

   document.body.scrollTop = 0;
   document.documentElement.scrollTop = 0;
   

   经过测试不管是在app.vue页面还是在滚动的当前页面观察上述值均为0，故设置该参数没有效果。
2. 在滚动的页面中 在this.$nextTick(() =>{})里设置scrollTop，通过getElementsByClassName选择对应元素并给其设置srollTop。先将页面滚动条恢复至顶部，后进行跳转。

   goto() {
   	this.$nextTick(() => {
   	  document.getElementsByClassName("main")[0].scrollTop = 0
   	});
   	this.$router.push({
           path: '/xxxx',
         })
   }
   

   经过测试 document.getElementsByClassName(“main”)[0].scrollTop拿到的值均为0，故该参数没有效果。
3. 通过给window添加鼠标的滚动事件

   mounted() {
   	window.addEventListener('scroll', this.scrollMethod)
   },
   destroyed() {
   	// 销毁时，删除监听滚动事件，否则其他.vue文件也会受影响
       window.removeEventListener('scroll', this.scrollMethod)
   },
   methods: {
   	scrollMethod(e) {
   		console.log(document.documentElement.scrollTop)
   	}
   }
   

   经测试scrollMethod()方法监听不到，鼠标的滚动。没有日志打印。

最终解决

参考了文档： vue 中监听document.body.scrollTop 值总为0的解决方法

1. 首先在vuex中添加state
2. 给window添加鼠标的滚动事件,注意有第三个参数(‘scroll’, this.scrollMethod, true)，并在鼠标滚动的事件中，将事件参数参数e存入到Vuex中。

   mounted() {
       window.addEventListener('scroll', this.scrollMethod, true)
   },
   destroyed() {
       // 销毁时，删除监听滚动事件，否则其他.vue文件也会受影响
       window.removeEventListener('scroll', this.scrollMethod)
   },
   methods: {
   	scrollMethod(e) {
     		this.$store.state.settings.scrollEl = e
   	}
   }
   

3. 在跳转时通过从Vuex中获取scrollEl，并给里边的target.scrollTop赋值0，即可在跳转时使滚动条回到顶部。

   goto() {
   	this.$store.state.settings.scrollEl.target.scrollTop = 0
   	this.$router.push({
           path: '/xxxx',
         })
   }