Vue监听并自定义浏览器返回事件方案

概要

最近项目上使用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.youkuaiyun.com/weixin_39667945/article/details/88563003

2.addEventListener()

参考资料:https://blog.youkuaiyun.com/Alexbyy/article/details/91388862