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

在使用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

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

 

转载于:https://www.cnblogs.com/wyongz/p/11275577.html