vue返回指定页面（vue3项目返回第三方页面onBeforeUnmount和onBeforeRouteLeave失效问题）

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)

}