目录
一、问题描述:
最近在开发小程序使用web-view嵌套H5页面,H5页面是vue单页面,router采用的history的模式,
微信小程序里web-view页面是一个网站,里面包括多层的跳转 ,发现点击小程序原生的左上角
按钮,不能一次返回小程序的页面,而是把H5的所有的历史地址返回一遍后才会回到小程序,
对用户体验不友好
二、原因:
小程序的头部自带的返回按钮是根据history栈进行逐层返回的
三、解决方案:
方案一:在H5项目里面,用this.$router.replace 代替this.$router.push,
说明;
this.$router.push:跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面。
this.$router.replace 跳转到指定的URL,不会向history里面添加新的记录,替换history栈中最后一个记录,点击后退会返回至上一个页面。(A----->B----->C 结果B被C替换 A----->C)
方案二:通过history.pushState添加历史记录名目,history.onpopstate监听历史记录条目发生变化时,调用小程序API :wx.navigateBack
目前方案二不适合目前需求,采用的的方案一开发的
四、注意事项:
目前本人觉得这两个方案都不是最佳解决方案,只是强制解决了问题,如果有遇到相同问题,有更好的解决方案的大佬们可以留言,谢谢