vue-router如何在返回时返回到上次滚动位置方法集锦

烈焰晴天

于 2018-08-08 10:53:54 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_21937107/article/details/81504285

前端专栏收录该内容

46 篇文章 ¥29.90 ¥99.00

订阅专栏

本文介绍了多种在Vue-router中实现页面返回时滚动位置记忆的方法：1. 在router.js配置history模式；2. 利用Vue的$nextTick处理DOM更新；3. 使用默认的hash模式结合滚动位置保存；4. 利用scrollBehavior方法进行定制化处理。通过这些方法，可以在用户从详情页返回列表页时确保滚动条回到之前的位置。

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

方法一：

1.在router.js里面（即路由文件中），此时模式为 history

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop
      }
      return { x: 0, y: to.meta.savedPosition || 0 }
    }
  }
})

2.在router.js里面需要记录位置的单页面里面