vue3 h5网页,safari浏览器使用手势右滑返回上一页,上一页不执行任何js?

作者站长头像
站长
· 阅读数 8

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

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