Vue-router中scrollBehavior滚动到顶部

2018-09-10  本文已影响0人  Yuhoo

写在前面
在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 };
}
上一篇下一篇

猜你喜欢

热点阅读