AngularJS：不修改URL跳转至404未找到状态的技术咨询

嘿，我懂你想要的效果——不用改变浏览器地址栏的URL，就能切换到404的视图状态对吧？用UI-Router的$state.go()加上特定参数就能轻松实现，下面一步步来：

1. 定义无URL的404状态 #

首先，先在你的$stateProvider里定义一个不带url属性的404状态，这样它就不会和任何URL路径绑定，只是一个纯内部视图状态：

$stateProvider
  // 先定义你的404状态
  .state('404', {
    templateUrl: 'views/404_not_found.html', // 替换成你的404模板路径
    controller: 'NotFoundController' // 可选，对应404页面的控制器
  })
  // 你的现有offers状态
  .state('offers', {
    url: '/offers/packages',
    templateUrl: 'views/aosOffers/aosoffers.html',
    controller: 'OffersController'
  });

2. 在需要的场景下跳转404（不修改URL） #

当你需要触发404跳转时（比如数据不存在、权限不足等场景），使用$state.go()并传入{location: false}参数——这个参数就是让UI-Router不更新浏览器URL的关键！

示例1：在状态的resolve中判断跳转 #

如果是在进入offers状态前就需要判断是否要跳404，可以在resolve里处理：

.state('offers', {
  url: '/offers/packages',
  templateUrl: 'views/aosOffers/aosoffers.html',
  controller: 'OffersController',
  resolve: {
    offerData: function($state, OfferService) {
      return OfferService.getPackages().then(function(response) {
        // 假设数据为空时触发404
        if (!response.data || response.data.length === 0) {
          // 跳转到404状态，第三个参数location: false禁止URL修改
          $state.go('404', {}, {location: false});
        }
        return response.data;
      });
    }
  }
});

示例2：在控制器中判断跳转 #

如果是在控制器逻辑里才需要触发404，直接在控制器里调用即可：

angular.module('mean').controller('OffersController', function($state, OfferService) {
  OfferService.getPackages().then(function(response) {
    if (!response.data || response.data.length === 0) {
      // 同样用location: false保持URL不变
      $state.go('404', {}, {location: false});
    } else {
      // 正常处理业务逻辑
      this.offers = response.data;
    }
  });
});

补充说明 #

• 保留你原来的$urlRouterProvider.otherwise("/link/404_not_found")是没问题的，它用来处理用户输入无效URL的场景；而上面的方法是处理业务逻辑触发的404，且不想改变当前URL的情况。
• {location: false}参数会让UI-Router只切换内部状态和视图，完全不触碰浏览器的地址栏，完美满足你的需求。

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