在做的Vue项目中,从一个长页面跳到另一个路由后,页面的位置还停留在上个页面的位置,没有回到顶部,只需要在路由配置里添加scrollBehavior方法。
router/index.js 文件中:
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
}
],
scrollBehavior (to, from, savedPosition) { //添加该方法
return { x: 0, y: 0}
}
})
scrollBehavior
方法接收 to
和 from
路由对象。第三个参数 savedPosition
当且仅当 popstate
导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
这个方法返回滚动位置的对象信息,长这样:
-
{ x: number, y: number }
-
{ selector: string, offset? : { x: number, y: number }}
(offset 只在 2.6.0+ 支持)
Vue Router 滚动行为 官方文档: