Angular 8中如何条件性禁用浏览器返回按钮？

问题根源分析 #

你的现有代码存在两个核心问题：

• 硬编码了const es = 'D'，导致永远进入禁用分支，直接触发“无条件禁用返回”的问题。
• 每次触发popstate就执行pushState，会让浏览器历史栈不断叠加无效路径，多次点击返回后路径拼接错误，最终出现跳转到主页的异常。

修复后的代码实现 #

// 初始化时先添加一个初始状态，防止历史栈为空
window.history.pushState({ isRestricted: false }, "", window.location.href);

window.addEventListener("popstate", (e) => {
  // 替换为你的实际条件判断逻辑，比如从页面状态/路由获取
  const shouldDisableBack = checkIfNeedDisableBack(); 

  if (shouldDisableBack) {
    // 阻止默认返回行为
    e.preventDefault();
    // 使用replaceState替换当前历史记录，避免栈无限叠加
    window.history.replaceState({ isRestricted: true }, "", window.location.href);
  }
  // 条件不满足时，不做任何处理，让浏览器正常执行返回
});

// 示例：根据业务场景定义条件判断函数
function checkIfNeedDisableBack() {
  // 比如判断当前是否处于特定路由、页面状态
  return window.location.pathname.includes("/index/watchlist/home");
}

关键实现要点 #

• 动态条件判断：把固定的es == "D"替换为动态的条件函数，根据实际业务场景（如当前路由、页面交互状态）决定是否禁用返回。
• 避免历史栈膨胀：用replaceState替代pushState，不会在历史栈中新增记录，只是替换当前状态，防止路径重复拼接导致的异常跳转。
• 初始化历史状态：页面加载时先推入一个初始状态，确保历史栈不为空，避免首次点击返回时出现异常。

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