vue3项目返回第三方页面onBeforeUnmount和onBeforeRouteLeave失效问题

Posted 2023-04-04 mewmew1

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)

Vue路由传参及传参后刷新导致参数消失处理

参考：https://blog.csdn.net/qq_43103581/article/details/82260073（vue 路由传递参数，刷新页面后参数丢失）

项目功能需要，要从列表页跳转到第三方提供的URL上（这里第三方页面我是通过iframe引入在详情页，目的是点击返回时可以通过keepAlive让列表页不刷新，如果不通过iframe直接跳第三方链接，那么返回必然会重新拉取数据），一路百度，刚开始使用

this.$router.push({name:‘list‘, params:{id: id}})

在详情页获取参数：

this.$router.params.id

试了一下，可以拿到数据，很开心，本以为这样就结束了，然后刷新了下页面，发现页面啥都没了（因为传过来的是URL），百度了下，原来这种传参刷新页面时参数会消失

 

没办法，问了下老大，他说用query属性设置，于是就接着百度，找到大神的文章：https://blog.csdn.net/qq_43103581/article/details/82260073，套用里面的方法：

this.$router.push({ name: ‘NewsDetail‘, query: { newsUrl: url } })　

 

然后在详情页这样获取参数：

this.$router.query.newsUrl

 

保存，到页面上重新试了一下，没问题了。

 

 

当然了，大神的文章里也介绍了另一种路由传参防止刷新参数消失的方法，也是使用最开始使用的那种方法，只是需要在路由中进行一些改动，下面我直接套用大神的代码说明：

routes: [
    {
      path: ‘/list/:id‘,
      name: ‘list‘
    }
]

 

this.$router.push({name:‘list‘, params:{id: id}});

获取参数：this.$router.params.id即可

 

总结：以上两种方法均可实现路由传参且防止刷新参数消失，喜欢哪种方法用哪种就好。