vue中切换页面自动滚动回到顶部

最新推荐文章于 2023-09-28 10:46:09 发布

芒果终结者

最新推荐文章于 2023-09-28 10:46:09 发布

阅读量4.9k

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/cs23405/article/details/109680093

版权

45 篇文章 1 订阅

订阅专栏

应用场景：

A页面内容多，有滚动条出现，

B页面内容少，没有滚动条，

在 A页面把滚动条下拉到一半，然后点击 B页面，此时B页面也出现了滚动条，这样是不对的，我们想让切换到B页面时不出现滚动条。

解决办法：

单个页面：

// 在/A页面, vue的mounted方法中, 写设置页面滚动条的这个方法
mounted() {
 // 切换页面时滚动条自动滚动到顶部
    window.scrollTo(0,0);
}

全部页面：在main.js中

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
  // 或
  // window.scroll(0, 0);
});

PS：网上有说放在`router.beforeEach`更好，我试了不行，会导致点击不了，只能是afterEach才可以

关注