Javascript 第页没有'；t重定向到无效url上的指定页面

我有下面的角函数

功能：

var App = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']); App.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/dashboard.html' }) .when('/:pages', { templateUrl: function(routeParams) { return 'views/' + routeParams.pages + '.html'; } }) .otherwise({redirectTo: '404.html'}) }]); var App=angular.module（'App'，['ui.bootstrap'，'ngRoute'，'ngAnimate']）； App.config（['$routeProvider'，函数（$routeProvider）{ $routeProvider 。当（“/”{ templateUrl:'views/dashboard.html' }) .when（“/：pages”{ templateUrl:函数（routeParams）{ 返回'views/'+routeParams.pages+'.html'； } }) 。否则（{重定向到：'404.html'}） }]); 我有一个侧栏导航控件。我已经创建了4页

因此，当我单击这些导航项时，相应的页面将正确打开

还有一些我还没有创建的页面。但根据下面的函数

当我没有不存在的东西时，它必须返回到文件夹根目录中存在的

404.html

文件

发生的事情是，我在控制台中没有收到错误，地址栏中的url反映了上次单击的有效页面

---

有人告诉我我在哪里犯了错误，以及此方法是否适用于动态路由？

重定向到更新$location，因此您不必指定.html，只需指定routeParameter

你最好这样做：

[...]
.when('/error', { templateUrl: '404.html' })
.otherwise({redirectTo: '/error'});

---

否则，当没有其他定义匹配时将调用。但是您的/：pages定义始终匹配，从而导致无法调用其他定义。当尝试加载模板时，否则定义不会对来自服务器的404做出反应

最简单的解决方案是为每个页面创建路由定义，而不是一般的路由定义。例如 。当（'/page1'，…） 。当（'/page2'，…） 依此类推，

否则（）

部分捕获与任何指定路由不匹配的路径。
在您的情况下，路由匹配，但模板在指定的URL处不可用。

$routeProvider

对此一无所知，也无能为力

您可以做的是（见下文）检查模板是否可用，以及是否不可用，使用

$location

重定向到适当的路径（例如

/error/404

）

为了确定页面是否有效（即其模板可用），您可以尝试访问模板（使用

$http

）并捕获任何错误（表示没有模板）等。但我不喜欢这种方法（由于依赖于模板的可用性来确定页面的存在/有效性，imo不是一个很好的做法-例如，在网络或服务器出现问题时，它很容易导致错误消息的误导）

我最喜欢的方法是保留一个“有效”/现有页面的列表，并对其进行检查。如果当前页面应可用，则按常规获取模板等。如果不可用，则重定向到错误页面

上面描述的逻辑可以放在

$routeProvider

的

resolve

属性中（因此它会在实例化控制器和加载视图之前执行）

例如：

---

---

还有，这个

非常感谢。我也非常理解。我还有一个疑问。对于我之前使用的函数，即使我转到一个不存在的url。我不会被路由到

404.html

文件。你能告诉我为什么吗？我在控制台中得到错误，

get:（我指定的url）404-找不到

。您使用的是

重定向到

来指示HTML文件。

重定向到

用于重定向到路由。您应该使用

否则（{templateUrl:'404.HTML'}）

。您是最好的，但我在出现错误页面“后退按钮”时发现了不起作用，在你的例子中只是不起作用在我的作品中显示“试图多次加载角度”：/any solution？@SzymonDziewoński：之所以会出现这种情况，是因为“后退”按钮请求不存在的URL，该URL会重定向回

/error/404

。您可以解决这个问题，将浏览器历史记录中不存在的URL替换为

/error/404

。这样，“后退”按钮将返回到上一个现有页面。您可以可以使用

$location.replace（）

。我已经更新了答案和演示。太好了！我正在寻找的是，我发现angular找不到任何不存在的链接视图，因此它破坏了代码：）感谢快速回复：）

var app = angular.module(...);

// This should be a constant, so it can
// get injected into configuration blocks
app.constant('EXISTING_PAGES', [
  'page1',
  'page2',
  ...
]);

app.config(function configRouteProvider($routeProvider, EXISTING_PAGES) {    
  $routeProvider.
    when('/', {
      templateUrl: 'views/dashboard.html'
    }).
    when('/:page', {
      templateUrl: function getPageTemplateUrl(routeParams) {
        return 'views/' + routeParams.page + '.html';
      },
      resolve: {
        exists: function resolveExists($location, $route) {
          // Because this is executed before the instantiation of the 
          // controller and the view is not fully loaded yet, the parameters
          // should be accessed via `$route.current.params`
          if (EXISTING_PAGES.indexOf($route.current.params.page) === -1) {
            // This is not a valid/existing page, 
            // let's redirect to an appropriate error page
            $location.replace();   // Replace the URL in the history
            $location.path('/error/404');
          }
          return true;
        }
      }
    }).
    // This should be a separate route, so we can redirect to it
    when('/error/404', {
      templateUrl: '404.html'
    }).
    otherwise({
      redirectTo: '/error/404'
    });
});