关于vue-router中scrollBehavior方法滚动行为的使用
好处当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置}参数说明:to, from都是路由对象;savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。案例使用场景:项目中经常会遇到异步请求接口数据,这些异步操
·
好处
当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
参数说明:
to, from都是路由对象;
savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
案例使用
场景:项目中经常会遇到异步请求接口数据,这些异步操作通常会放在created、mounted钩子里面
分析:通过在不同的生命周期钩子和scrollBehavior()使用console.log()打印顺序如下:
created钩子
mounted钩子
to参数: {***} from参数: {***}
异步请求数据:get data
打印位置信息 savedPosition {x: 0, y: 630}
可知:必须使用异步滚动,否则,请求的数据重新赋值,将导致页面重新渲染,因此利用setTimeout将回调事件放到队列中,且异步请求接口的回调事件优先进入队列,最后才是setTimeout的回调事件。
完整代码如下
const router = new Router({
mode: 'history',
routes: [...],
scrollBehavior (to, from, savedPosition) {
console.log('to: ', to)
console.log('from: ', from)
if (savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('savedPosition', savedPosition)
resolve(savedPosition)
}, 500)
})
} else {
return { x: 0, y: 0 }
}
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)