小程序的web-view页面返回按钮跳转问题

目录

一、问题描述：

二、原因：

三、解决方案：

四、注意事项：

---

一、问题描述：

最近在开发小程序使用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

目前方案二不适合目前需求，采用的的方案一开发的

History.pushState() - Web API 接口参考 | MDN在 HTML 文档中，history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

四、注意事项：

目前本人觉得这两个方案都不是最佳解决方案，只是强制解决了问题，如果有遇到相同问题，有更好的解决方案的大佬们可以留言，谢谢