vue3 h5网页,safari浏览器使用手势右滑返回上一页,上一页不执行任何js?
问题:A页面正常跳转B页面,B页面用手势右滑屏幕返回到A页面,A页面不执行任何生命周期方法(onMounted,watch等等)如果使用浏览器底部的返回按钮,则是正常的技术栈:vue3环境:iphone12,iOS16期望:需要执行一个在onMounted里面的方法,获取新数据
回复
1个回答

test
2024-07-05
window.addEventListener('pageshow', function(event) {
if (event.persisted) { // 判断是否从缓存中恢复页面
console.log('执行了pageshow');
// 这里添加需要执行的方法
}
});
window.addEventListener('pagehide', function(event) {
if (event.persisted) { // 判断是否缓存当前页面
console.log('执行了pagehide');
}
});
或者用路由守卫
const router = createRouter({
routes: [
{
path: '/A',
name: 'A',
component: A,
beforeRouteUpdate(to, from, next) {
// 这里添加需要执行的方法
console.log('执行了beforeRouteUpdate');
next();
}
},
{
path: '/B',
name: 'B',
component: B
}
]
})
或者这个
// 在 A 页面中添加监听器
window.addEventListener('popstate', function(event) {
console.log('执行了popstate');
});
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容