javascript - 使用 Angular-ui-router 解决 404 问题

Question

我有一个带有方法的服务:

service.getVenueBySlug = function(slug) {
    return $http.get(API + '/venue/' + slug);
};

在我的 app.routes.js 中:

.state('app.venue', {
  url: '/venues/:venueSlug',
  templateUrl: '/app/views/venue.html',
  controller: 'VenueController',
  resolve: {
    venue: ['VenueService', '$stateParams', '$state', function (VenueService, $stateParams, $state) {
      return VenueService.getVenueBySlug($stateParams.venueSlug).then(function(res) {
        return res.data;
      }).catch(function(err) {
        $state.go('app.404');
      });
    }]
  }
})

Controller VenueController简单地有:

$scope.venue = field

一切正常，如果我手动访问带有错误 field slug 的 URL，它会正确重定向到 404。

问题是我在控制台中收到一个令我困扰的错误:

有谁知道怎么解决吗？我正在使用 Angular 1.6.4 和 Angular-ui-router 1.0.6。

Answer 1

正如您帖子的评论中所提到的 - 在您的解析捕获中，您可能应该执行以下操作: return $q.reject({redirectTo: app.404});

然后在路由器配置中监听 stateChangeErrors:

$rootScope.$on('$stateChangeError',
   function(event, toState, toParams, fromState, fromParams, error) {
      if(error.redirectTo) {
         $state.go(error.redirectTo);
      }
   } 
})

需要 $q.reject 来处理(中断)当前的 stateChange，并且 stateChangeError 可以处理该拒绝。

(尚未测试代码，但我记得在我的一个项目中有类似的解决方案)