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)

}

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

android微信支付后返回第三方页面,微信支付后怎么返回指定界面 ios开发
满意答案 timerise 2015.09.07 采纳率:40% 等级:10 已帮助:671人在以下两个方法中实现(AppDelegate) //弃用的返回 - (BOOL)applicati ...
vue3项目中引入ts
提示:文章是基于vue3的项目基础上引入ts 文章目录 1.基于脚手架的情况下创建 vue3项目 2.启动未引入ts的vue3项目 3.在页面中(HomeView.vue)引入ts 4.配置vue3+ ...
vue项目某个APP页面实现手机物理按键返回、路由拦截、localStorage存取参数
vue项目某个APP页面实现手机物理按键返回.路由拦截.localStorage存取参数最近做个功能:在web系统里面嵌套两个app页面,当然APP页面在web系统上没有路由跳转,而是从另外系统扫码 ...
vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
[项目实战] 使用Idea构建单页面Vue3项目（不使用node、npm）
前言某天张三对小花说,我需要在一台新电脑上实现一个前端的漂亮页面:比如京东手机首页(m.jd.com). 小花这时吭哧吭哧的去新电脑上安装nodejs.npm,然后在本地使用npm构建vue3项目, ...
基于vue3.0简单的页面使用
基于vue3.0简单的页面使用项目效果图项目文件图 package.json main.js App.vue views/Tutorial.vue views/TS.vue views/Docs. ...
移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法...
1.移动端上拉加载网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
（2022）Springboot+vue3项目开发前后端分离书法图书管理Coun
项目地址:https://github.com/KKJava1/Coun Coun是基于Springboot+vue3 项目采用了前后端分离技术:后端采用 springBoot 基本框架,数据库连接池 ...

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

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

最新文章

热门文章