vue3项目埋点需求，需记录页面浏览时长，入口在第三方页面，从vue3页面返回到第三方页面时，onBeforeUnmount、onBeforeRouteLeave全部失效不执行，在vue3项目里组件之间跳转没问题。经测试，popstate事件监听pc端及移动端都失效；js的beforeUnload事件在pc端谷歌浏览器上返回第三方页面有效，vue项目内组件跳转无效，ios手机上这些事件监听及钩子函数全部无效。
解决方法：
监听js的pagehide事件，在pc端及移动端都有效，返回第三方页面和vue项目里点击按钮跳转第三方也都有效，（但是通过window.location.href跳转小程序时无效，浏览小程序的时间会计入到浏览页面时长里。可在点击跳转按钮时重新埋点）
pagehide和pageshow适合不同项目页面之间跳转监听；
onBeforeRouteLeave适合vue项目内组件之间跳转
代码：
//pagehide跳转第三方时执行
window.addEventListener(“pagehide”,pagehideFun)
const pagehideFun=()=>{
console.log(“监听pagehide事件”)
}
//pageshow从第三方跳转回来时执行
window.addEventListener(“pageshow”,pageshowFun)
const pageshowFun=()=>{
console.log(“监听pageshow事件”)
}
//在vue内组件之间跳转时需移除事件监听
beforeRouteLeave(){
window.removeEventListener(“pagehide”,pagehideFun)
window.removEventListener(“pageshow”,pageshowFun)

}

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。