Vue-Router进阶之滚动行为详解
滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
注意:这个功能只在HTML5history模式下可用。
当创建一个Router实例，你可以提供一个scrollBehavior方法：
varrouter=newVueRouter({
routes:[...],
scrollBehavior(to,from,savedPosition){
//return期望滚动到哪个的位置
}
})
scrollBehavior方法接收to和from路由对象。第三个参数savedPosition当且仅当popstate导航(通过浏览器的前进/后退按钮触发)时才可用。
这个方法返回滚动位置的对象信息，长这样：
- {x:number,y:number}
- {selector:string}
如果返回一个布尔假的值，或者是一个空对象，那么不会发生滚动。
举例：
scrollBehavior(to,from,savedPosition){
return{x:0,y:0}
}
对于所有路由导航，简单地让页面滚动到顶部。
返回savedPosition，在按下后退/前进按钮时，就会像浏览器的原生表现那样：
scrollBehavior(to,from,savedPosition){
if(savedPosition){
returnsavedPosition
}else{
return{x:0,y:0}
}
}
如果你要模拟『滚动到锚点』的行为：
scrollBehavior(to,from,savedPosition){
if(to.hash){
return{
selector:to.hash
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。