如果一个页面特别长,用户已经进行了页面滚动,这时候跳转到了下一个页面,页面滚动应该怎么处理?
vue-router已经给我们提供了scrollBehavior来处理这个问题。
但是这个功能只在支持 history.pushState 的浏览器中可用。
不过也没关系,现代浏览器都是支持的。
scrollBehavior是在createRouter时传入的一个方法,比如我们要在跳转页面时,页面总是滚到顶部:
const router = createRouter({
history: createWebHashHistory(),
routes: [...],
scrollBehavior (to, from, savedPosition) {
return { top: 0 } // 表示页面滚到顶部
}
})
它还有三个参数,to是新进入的页面route,from是前一个页面的route,savedPosition表示,如果是浏览器的后退/前进按钮触发的页面切换,这个值是之前这个页面滚动到的位置。
比如,要返回一个页面时,还滚动到这个页面原来的滚动的位置,像浏览器原生的表现那样:
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
},
})
scrollBehavior还有一些其他配置,我就不多介绍了,大家看官网的说明就行了。