0
点赞
收藏
分享

微信扫一扫

vue全屏状态下退出登录仍保持全屏

根本解决

不要用Location等方式跳转,使用router方式跳转即可。


router跳转会导致浏览器退出全屏吗

在大多数情况下,当使用前端路由(例如 Vue Router 或 React Router)进行页面跳转时,浏览器通常不会退出全屏状态。前端路由是通过 JavaScript 在当前页面内进行导航,而不是通过浏览器的传统导航机制。因此,前端路由切换不会触发浏览器退出全屏。

你可以放心使用前端路由进行页面切换,而不会中断全屏体验。不过,仍然建议在进行页面切换前检查当前是否处于全屏状态,以便在必要时进行适当的处理。

示例代码:

// 保存当前全屏状态
const isFullscreen = document.fullscreenElement !== null;

// 在前端路由切换之前检查全屏状态
if (isFullscreen) {
  // 可以在这里执行一些处理,如退出全屏或其他逻辑
}

// 使用前端路由进行页面切换
router.push('新页面的路径');

这样可以确保在全屏状态下进行页面切换时,你有机会执行必要的逻辑以保持良好的用户体验。


location跳转会导致浏览器退出全屏吗

在大多数浏览器中,当使用 location 对象的 hrefassign 方法进行页面跳转时,当前的全屏状态通常会被中断,导致浏览器退出全屏模式。这是因为页面的跳转被视为一种导航行为,而浏览器在导航时通常会退出全屏以提供更一致的用户体验。

如果你在全屏状态下进行页面跳转,可以考虑在跳转之前先退出全屏,然后在跳转完成后再重新进入全屏。这样可以确保在页面切换时不会因为全屏状态而导致问题。

// 保存当前全屏状态
const isFullscreen = document.fullscreenElement !== null;

// 退出全屏
if (isFullscreen) {
  document.exitFullscreen();
}

// 页面跳转
window.location.href = '新页面的URL';

在这个示例中,如果当前页面处于全屏状态,先退出全屏,然后再进行页面跳转。在跳转完成后,你可能需要根据之前保存的 isFullscreen 状态重新进入全屏。

vue全屏状态下退出登录仍保持全屏_页面切换

举报

相关推荐

0 条评论