Vue-router中scrollBehavior滚动到顶部

写在前面
在Vue项目中,当我们在A页面滚动到中间位置, 然后跳转到B,在从B进入到A页面时,本应该回到A页面顶部,但是由于使用keep-alive组件缓存页面,A页面会滚动道上次位置。为解决这个问题,我们需要使用vue-router中的scrollBehavior。

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

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

对于所有路由导航,简单地让页面滚动到顶部
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 };
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 vue-router是什么:是vue.js官方的路由管理器和vue.js的核心深度的集成,让开发者更加简单的...
    GUAN_one阅读 3,753评论 0 2
  • 学习目的 学习Vue的必备技能,必须 熟练使用 Vue-router,能够在实际项目中运用。 Vue-rout...
    _1633_阅读 92,465评论 3 58
  • 用Vue.js + vue-router创建单页应用,是非常简单的,基本是这样的: 组件 → 路由 → 渲染地方 ...
    阿go阅读 1,415评论 0 0
  • 导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航。 参数或查询的改变并不会触发进入/离开的导航守卫。 1、全...
    SailingBytes阅读 1,191评论 1 3
  • 昨天下午给妈妈和姥姥送走之后,心里空空的。可能一下子从忙到闲,有些不适应,又或是不舍她们的离去。 怎样转换心态...
    Elsa蜕变之路阅读 248评论 0 0