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 };
}