文章目录

项目场景一、实现步骤1.mounted钩子中监听左上角返回事件2.method中定义方法3.页面销毁前解绑事件监听

项目场景

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

一、实现步骤

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

<code> 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);

}