Vue中beforeunload事件调用$router.push跳转失效问题求助

你原来的写法无效，是因为beforeunload触发时页面已经进入卸载流程，Vue路由的客户端跳转逻辑已经无法正常执行，所以$router.push不会生效。

可以通过会话存储标记+全局路由守卫的方式实现需求：

1. 在/game页面的组件中，给beforeunload事件添加标记存储逻辑：

window.addEventListener('beforeunload', () => {
  // 存储需要重定向的标记
  sessionStorage.setItem('needRedirectToLobby', 'true')
})

2. 在路由配置文件（通常是router/index.js）中添加全局前置守卫：

router.beforeEach((to, from, next) => {
  const redirectFlag = sessionStorage.getItem('needRedirectToLobby')
  // 如果刷新后要进入/game，且存在重定向标记
  if (to.path === '/game' && redirectFlag === 'true') {
    // 清除标记，避免下次进入/game时重复跳转
    sessionStorage.removeItem('needRedirectToLobby')
    next('/lobby')
  } else {
    next()
  }
})

原理说明：页面刷新时，浏览器会先执行beforeunload存储标记，然后重新加载应用。应用重启后，路由守卫会检测到即将进入/game的请求，结合标记触发重定向到/lobby，之后清除标记保证后续正常访问/game不受影响。

内容的提问来源于stack exchange，提问作者fasfdsa