好资源导航 » 文章资讯 » vue2.0路由切换后页面滚动位置不变BUG的解决方法

vue2.0路由切换后页面滚动位置不变BUG的解决方法

2023-09-15 10:52:05 517

最近项目中遇到这样一个问题，vue切换路由，页面到顶端的滚动距离仍会保持不变。

立即试用
个人中心

useRightNow(){
if(判断用户存在){
this.$router.push('/user')
}else{
this.$router.push("/login")
}
}

解决办法很简单，如下，直接监测watch路由变化，然后将body的滚动距离scrollTop赋值为0。

exportdefault{
watch:{
'$route':function(to,from){
document.body.scrollTop=0；
document.documentElement.scrollTop=0;
}
}
}

补充：hash模式下才会导致上述问题，history模式下vue官网有更好的处理方法。

以上这篇vue2.0路由切换后页面滚动位置不变BUG的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。