Vue 单页面页面跳转滚动条记忆问题

最新推荐文章于 2023-04-06 10:52:47 发布

Answer_Ming

最新推荐文章于 2023-04-06 10:52:47 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web 前端文章标签： vue.js javascript js

本文链接：https://blog.youkuaiyun.com/ZMM_Devil/article/details/121490152

web 同时被 2 个专栏收录

31 篇文章

订阅专栏

前端

31 篇文章

订阅专栏

本文主要探讨了在Vue中，页面跳转后二级页面滚动条位置与上级页面一致的问题。该问题源于Vue路由的实现方式，即通过history.pushState和history.replaceState方法。为解决这个问题，官方推荐使用`scrollBehavior`方法来自定义路由跳转后的滚动行为。示例代码展示了如何配置`scrollBehavior`以使滚动条始终返回到顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

单页面中页面跳转后，二级页面滚动条位置会跟上级页面一致。如首页列表页，进入详情如果详情内容可滚动，滚动条会同首页位置一致。原因vue路由跳转是通过对history.pushState()和history.replaceState()方法模拟来实现的，当调用router.go()或者 router.back()方法的时候就和history.hgo()、history.back()效果一样。但是，不加处理的情况下，组件的滚动行为会跟我们想象的不同

解决方案：

网上给出了很多解决方案，大多数是页面切换控制scroll位置。但是此处推荐vue官方给出的方案 scrollBehavior 方法，下边给出官方示例

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { x: 0, y: 0 }
  }
})

更多深入使用方法和场景在此不多赘述。