vue-router中scrollBehavior的巧妙用法

前端之家收集整理的这篇文章主要介绍了vue-router中scrollBehavior的巧妙用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题

解决方案:

Meta.keepAlive"> Meta.keepAlive">
const router = new Router({ scrollBehavior(to,from,savedPosition) { if (savedPosition && to.Meta.keepAlive) { return savedPosition; } return { x: 0,y:0 }; },});

2. 页面返回出现空白屏问题

问题

【前提】:iOS设备 【步骤】: 页面A是个列表很长-->滑到页脚的时候点击跳转之后到页面B--->再返回A页面 --->屏幕会出现空白遮罩层--->手指轻触屏幕滑动--->遮罩层消失

解决方案一

在接口请求成功后的回调操作完成后进行该操作,例如

{ this.courses = courses; }).then(() => { setTimeout(() => { window.scrollTo(0,1); window.scrollTo(0,0); }); });

该方案的弊端: 每个页面都需要做这样的处理,不推荐使用。

解决方案二(推荐)

使用scrollBehavior中的异步滚动操作

{ setTimeout(() => { resolve({ x: 0,y: 1 }); },0); }); },});

该方案直接在路由进行处理,兼容每个页面并且页面加载完后并也不会产生1px的滚动位置。

总结

以上所述是小编给大家介绍的vue-router中scrollBehavior的巧妙用法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/31603.html

猜你在找的Vue相关文章