Vue Router 4.3.0导致浏览器窗口无法最小化的排查与解决

1. 问题现象：浏览器窗口离奇"锁死"

那天我正在调试一个仿Bilibili的视频网站前端项目，突然发现一个诡异现象——Chrome浏览器窗口竟然无法最小化了！点击最小化按钮毫无反应，通过任务栏右键菜单也无法最小化，甚至Alt+Tab切换窗口后依然无法返回桌面。这个现象有以下几个特征：

• 特定页面触发：只有在访问项目页面时出现，其他标签页和网站正常
• 全局性影响：即使切换到其他标签页，只要项目页面仍在打开状态，整个浏览器窗口都无法最小化
• 可稳定复现：关闭项目页面立即恢复正常，重新打开又会出现

提示：这种影响浏览器原生行为的Bug非常罕见，通常意味着底层API被异常调用或某些事件监听器产生了冲突。

2. 排查思路：科学调试四步法

2.1 第一步：代码审查（耗时30分钟）

首先怀疑是自己的代码问题，于是全面检查了项目中可能影响窗口行为的代码：

javascript复制// 检查所有window事件监听器
window.addEventListener('blur', ...)  // 无
window.onbeforeunload = ...           // 无

// 检查全屏API调用
document.exitFullscreen()             // 无
element.requestFullscreen()           // 无

// 检查键盘事件拦截
document.addEventListener('keydown', ...) // 仅处理业务逻辑快捷键

排查结果：项目代码中没有任何直接操作窗口行为的逻辑。

2.2 第二步：依赖隔离测试（耗时2小时）

采用最小化测试方案，逐步添加依赖：

1. 纯净HTML测试
   创建仅含<h1>Test</h1>的HTML文件 → 最小化正常

2. 基础Vue3项目测试
   npm create vue@latest创建空项目 → 最小化正常

3. 逐项添加主要依赖：

   • 添加Element Plus → 正常
   • 添加Axios → 正常
   • 添加Vue Router 4.3.0 → ❌ 最小化失效

2.3 第三