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

最新推荐文章于 2024-10-14 17:01:48 发布

原创最新推荐文章于 2024-10-14 17:01:48 发布 · 5.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

45 篇文章

订阅专栏

该博客探讨了在Vue应用中如何处理页面滚动条的问题。当从内容丰富的A页面切换到内容较少的B页面时，不希望B页面出现滚动条。解决方案是在A页面的mounted钩子中设置滚动条回到顶部，或者全局地在main.js中使用router.afterEach，调用window.scrollTo(0,0)确保每次路由变化后滚动条复位。尝试将此操作放在router.beforeEach会导致页面交互问题。

应用场景：

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才可以

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

2 条评论