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 } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。