微客导航 » 文章资讯 » Vue 滚动行为的具体使用方法

Vue 滚动行为的具体使用方法

2023-09-24 19:46:05 144

滚动行为

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

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

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

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

返回滚动位置的对象信息

{x:number,y:number}
{selector:string}

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


滚动行为

首页
导航
关于
红色页面
蓝色页面

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

滚动行为