在mounted方法中加入代码:
if (window.history && window.history.pushState) {//监听手机的物理返回按键
history.pushState(null, null, location.href);
window.addEventListener("popstate", this.goBack2, false); //false阻止默认事件
}
其中,方法goBack2为在methods中自定义的方法,可在里面写上自己的业务逻辑。
需要值得注意的是,在页面被销毁前,需要解除该事件的监听:
window.removeEventListener('popstate', this.goBack2, false);//false阻止默认事件
若想在业务逻辑中,只监听手机的返回按钮(监听到后再做一些事情),且不做页面的返回操作,并且不会改变路由栈的顺序,则需在goBack2方法中添加代码:
const state = {
key: Math.random() * new Date().getTime()
}
window.history.pushState(state, null, location.href)
这样,页面就会停留在当前页。
代码完整截图: