vue路由切换时内容组件的滚动条回到顶部

时间:2022-05-28 22:52:38

在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验

1、当页面整体都要滚动到顶部的情况

router.afterEach(() => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
})

2、当页面中的其中一个组件中需要滚动到顶部的时候

 watch: {
$route(to) {
//监听路由变化的时候使滚动条回到顶部
this.$refs.content2.scrollTo(0,0)
}
}

其中this.$refs获取页面中添加ref属性的元素,上面的content2就是滚动的元素添加的ref属性为content2

通过监听路由的变化来实现路由切换时的滚动条回到顶部