在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面
问题描述在A页面从B页面带了参数返回之后,A页面会刷新,直接导致了,A页面返回上一个页面需要点击两次,其中点击一次时还是A页面。
解决方案首先第一个想法就是,设置一下退回按钮直接跳到上一个页面去;,经过资料查找,回退按钮是没有直接触发函数的,也就是说不能直接控制回退的功能。
在寻找资料时,发现可以间接的触发一个unload函数,于是尝试在当前页面退回按钮点击后,会立即触发当前页面的unload方法,在unload里面尝试跳转到A的前一页,结果如下:
在A页面添加了unload方法,然后跳转到指定的页面,发现一个现象,第一次点A退回,是不触发unload,第二次才触发了unload,也就是说在B回到A页面之后刷新之后的A页面不触发unload页面。
那么是web-view刷新产生的这个页面,也不能干掉,让web-view刷新这个页面就可以了,找了很多资料,没有理出一个头绪,web-view既然是第二次刷新产生的,那么让只刷新第一次是不是就可以解决了,于是做了如下尝试:
在B页面把A页面的web-view的src变量置为空,然后在A页面添加wx:if={{src!==''}}的条件控制,在src为空时销毁web-view,然后在B页面退回通过另一个变量把需要的url传递过去在A页面onShow,再设置src为一个我们期望的跳转url,总结一下:
A页面跳到B页面时设置A的src为空-销毁了`web-view`,退回A页面时在onShow方法在设置src的值-`web-view`被重新渲染测试结果:
页面被刷新,且没有了A页面退回两次的情况
自此,微信小程序使用vue嵌套页面刷新的核心问题都解决了