概要
最近项目上使用Uniapp开发一款APP,使用webview打开vue开发的H5页面,从app端进入H5的列表页,再由列表页进入详情页再进入提交表单页,表单提交成功后会自动跳转回列表页,这时再点击app自带的返回按钮,会返回到填写表单页,但是项目上希望返回到app端的首页
原因
每次进入一次页面,都会往页面栈中压入一条记录,返回也是返回上一个页面,使用vue router的replace方法也只是将当前页面从栈中替换掉,无法解决问题
方案
通过查阅了一些资料,总结出来的思路是使用pushState像浏览器历史记录中插入一个不刷新的当前页,这样在返回的时候就可以通过监听popstate去处理一些自定义的跳转逻辑,具体代码如下
// 在需要处理自定义返回的页面中添加监听事件
onBeforeMount(() => {
if (window.history && window.history.pushState) {
// 向历史记录中插入了当前页
history.pushState(null, null, location.href)
window.addEventListener('popstate', goBack)
}
})
// 在离开页面前销毁监听事件
onBeforeUnmount(() => {
window.removeEventListener('popstate', goBack)
})
// 自定返回事件
const goBack = () => {
// 此处可以根据自己业务去定制化返回逻辑,可以调用原生提供的方法关闭webview从而达到返回APP页面的目的
console.log('点击了浏览器的返回按钮')
}
技术概念
1. history.pushState()
参考资料:https://blog.csdn.net/weixin_39667945/article/details/88563003