微客导航 » 文章资讯 » Vue-Router进阶之滚动行为详解

Vue-Router进阶之滚动行为详解

2023-09-24 19:10:05 353

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意:这个功能只在HTML5history模式下可用。

当创建一个Router实例，你可以提供一个scrollBehavior方法：

varrouter=newVueRouter({
routes:[...],
scrollBehavior(to,from,savedPosition){
//return期望滚动到哪个的位置
}
})

scrollBehavior方法接收to和from路由对象。第三个参数savedPosition当且仅当popstate导航(通过浏览器的前进/后退按钮触发)时才可用。

这个方法返回滚动位置的对象信息，长这样：

如果返回一个布尔假的值，或者是一个空对象，那么不会发生滚动。

举例：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。