角度 ui-router 中的 404 页面答案

【问题标题】：404 page in angular ui-router角度 ui-router 中的 404 页面
【发布时间】：2017-06-04 19:45:03
【问题描述】：

我在一个有角度的单页应用程序中使用 ui-router。我定义了一些路由，并且我有一个特定的 404 路由，如下所示：

app.config(function($urlRouterProvider, $stateProvider){
   $urlProvider.otherwise('404')
   $stateProvider
      .state('example', {
         url: '/example/:id',
         templateUrl: 'example.html',
         controller: 'ExampleController'
      })    
      .state('404', {
         url: '*path',
         templateUrl: '404.html'
      })
})

注意 404 状态的 url 是 '*path'，这意味着它将匹配任何路径。我这样做是为了如果用户输入类似“/some-non-existent-url”的内容，他不会被重定向到“/404”，而是停留在“/some-non-existent-url”，但请参阅404.html 模板。问题来了：假设我的应用与我的 ExampleController 中的一些 REST API 进行交互，并且 API 可能会返回一个对象，或者它可能会根据 id 返回 404 Not Found从它收到的网址。因此，在我的控制器内部，每当发生这种情况时，我都会尝试重定向到 404：

app.controller('ExampleController', function($state){
    someAPICall().then(function(response){ // do something}, 
                       function(response){
                            if(response.status == 404){
                                 $state.go('404');
                            }
                        });
});

这就是奇怪的工作人员出现的地方。它显示 404.html 模板 - 瞬间 - 然后重定向到主页（为简洁起见，我的代码中没有包含它）。我的猜测是 '404' 状态没有指定真正的 url：例如，如果我将它的 url 从 '*path' 更改为 '/404'，这可以正常工作，但我不想这样做，因为用户不会看到哪个是导致 404 响应的真实 url。这个问题有解决办法吗？

【问题讨论】：

我想在这里做一个例子jsfiddle.net/ojzdxpt1/10，对我来说它看起来很有效，但不知道你是如何一起做这一切的，很难知道。您的 stateProvider 中可能有一些我不知道的冲突状态

标签： angularjs routing angular-ui-router

【解决方案1】：

您的代码有错误。你正在写$urlProvider.otherwise('404')。将其更改为$urlRouterProvider.otherwise('404')。那应该可以正常工作了。

【讨论】：

【解决方案2】：

对我有用的是删除 $urlProvider.otherwise('404') 并将 404 状态作为最后一个状态

【讨论】：