滚动行为:
使用前端路由,当切换到奥新路由时,想要页面滚动到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router,可以自定义路由切换时如何滚动
这个功能只在支持 history.pushState
的浏览器中可用。
scrollBehavior(to,from,savePosition){//点击浏览器的前进后退或切换导航触发
console.log(to);//要进入的目标路由对象 要去向哪里
console.log(from);离开的路由对象 从哪里来
console.log(savePosition);//记录滚动条的坐标,点击前进后退的时候记录值
}
看下图是to、from和savePosition的打印结果:
看下面的使用示例
var Router = new Router({
mode:'history',
scrollBehavior(to,from,savePosition){
//在按下前进或后退按钮时,就会让页面滚动到指定的地方
/* if(savePosition){
return savePosition;
}else{
return {x:0,y:0};
}*/
//滚动到指定的锚点
if(to.hash){
return {
selector:to.hash
};
}
}
})