mp-vue微信小程序多层路由跳转问题复盘

转载于 2018-12-14 05:12:04 发布 · 450 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c133a5ce51d453668734d73

文章标签：

本周开发中遇到小程序多层页面嵌套跳转导致的商品详情数据丢失问题。当从商品详情A跳转至B再返回时，A页面数据被清空。原因是页面回退时触发onunload，数据被reset。解决策略是在unload保留data的Id，在onshow时对比并重新加载数据。

本周开发回流模块，小程序首次出现了多层页面嵌套跳转bug的情况。

以商品详情为例：由商品详情A,经过其他页面，跳转到商品详情B，回退页面会出现商品详情A页面空白数据丢失的情况。
复制代码

原因是商品详情B页面回退（nagetiveBack）时触发onunload，页面被销毁，数据被reset清除，回退到商品详情A，onshow触发，而商品详情页数据已经在商品详情B时被刷新为B的数据，且已被销毁。
目前解决方案是在unload阶段保留当前data的Id，手动清除其他数据。在onshow阶段再次对比页面url的Id与data的Id，如果不一致则再次请求数据刷新页面。