AngularJS 如何阻止浏览器后退按钮触发地址变更或页面跳转

本方案仅适用于AngularJS 1.x版本，不适用于Angular 2至12及更高版本。

1 禁止页面重载或跳转回历史URL #

实现分为拦截页面刷新、拦截历史地址跳转两个部分，可直接在应用根模块的run块中全局配置：

• 代码实现示例：

angular.module('yourAppName', [])
.run(['$rootScope', '$window', function($rootScope, $window) {
  // 禁止页面重载、刷新
  $window.addEventListener('beforeunload', function(e) {
    e.preventDefault();
    e.returnValue = '';
    return '';
  });

  // 全局路由跳转拦截
  let allowLegalJump = false; // 可自定义变量控制合法跳转的放行
  $rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
    if (!allowLegalJump) {
      event.preventDefault();
      // 若仅需禁止回退历史，可新增逻辑判断newUrl是否属于历史地址，再决定是否拦截
    }
  });

  // 历史栈覆盖，点击后退始终停留当前页
  history.pushState(null, null, location.href);
  $window.onpopstate = function () {
    history.go(1);
  };
}]);

2 特定组件内禁用浏览器后退按钮 #

仅在指定组件生命周期内生效，组件销毁后自动恢复全局后退功能，不会影响其他页面使用：

• 组件代码示例：

angular.module('yourAppName').component('yourSpecificComponent', {
  template: '<div>组件内容</div>',
  controller: ['$rootScope', '$window', function($rootScope, $window) {
    let removeLocationListener;

    // 组件初始化时启用后退拦截
    this.$onInit = function() {
      history.pushState(null, null, location.href);
      // 拦截路由跳转
      removeLocationListener = $rootScope.$on('$locationChangeStart', function(event) {
        event.preventDefault();
      });
      // 拦截popstate后退事件
      $window.onpopstate = function () {
        history.go(1);
      };
    };

    // 组件销毁时恢复后退功能
    this.$onDestroy = function() {
      removeLocationListener();
      $window.onpopstate = null;
    };
  }]
});

若组件内存在需要放行的合法跳转逻辑，可在跳转执行前将allowLegalJump设置为true，跳转完成后重置为false即可。

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