微信小程序webview中监听返回按钮

文章目录

项目场景

微信小程序页面A跳转—>webview页面首页B跳转—>webview列表页C跳转—>webview详情页面D，当在webview详情页面D采用router.push 回到---->webview页面首页B,此时在B页面点击左上角返回按钮会依次回到，D、C、B页面，需求是只要处于B页面点击左上角按钮直接返回A页面。

一、实现步骤

1.mounted钩子中监听左上角返回事件

mounted(){// 往history中添加一条记录
   this.pushHistory()//  监听popstate事件
   window.addEventListener('popstate',this.listenPopstate);}

2.method中定义方法

methods:{listenPopstate(){//  判断是否在B页面if(this.$route.path==='/accountdetail')//  跳转小程序页面相关逻辑},pushHistory(){
      window.history.pushState(null,null,null)}}

3.页面销毁前解绑事件监听

beforeDestroy(){
   window.removeEventListener('popstate',this.listenPopstate);}