页面不会重定向到无效url上的指定页面

我有以下的Angular函数。

功能：

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'})

}]);

我有一个侧边栏导航控件。 我创建了4页。

所以当我点击这些导航项时，相应的页面可以正确打开。

还有一些我还没有创建的页面。 但是按照下面的函数。

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

发生的是，我没有在控制台中发现错误，地址栏中的url反映了最后一次点击的有效页面。

有人让我知道我在做什么错误，以及这种方法对动态路由是否正确？

---

otherwise()部分捕获与任何指定路由不匹配的路径。
在你的情况下，路由匹配，但模板在指定的URL不可用。
$routeProvider不知道任何关于它的事情，也不能做很多事情。

你可以做什么，以某种方式（见下文）检查模板是否可用，以及它是否使用$location重定向到适当的路径（例如/error/404 ）。

为了确定页面是否有效（即它的模板可用），你可以尝试访问模板（使用$http ）并捕获任何错误（表示没有模板）等。但我不喜欢这种方法（因为依赖于确定页面存在/有效性的模板的可用性不是一种非常好的做法 - 例如，在网络或服务器问题等情况下，它很容易导致误导性的错误消息。

我最喜欢的方法是保留“有效”/现有页面的列表并检查它。 如果当前页面应该可用，请像往常一样继续获取模板等。否则，重定向到错误页面。

上面描述的逻辑可以放在$routeProvider的resolve属性中（所以它在控制器被实例化并且视图被加载之前被执行）。

例如：

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'
    });
});

---

另请参阅此简短演示 。

---

否则将在没有其他定义匹配时调用。 但是你的/：页面定义总是匹配的，否则不会被调用。 当尝试加载模板时，其他定义不会对来自服务器的404做出反应。

为每个页面创建路由定义的最简单解决方案，而不是通用解决方案。 （'/ page1'，...）.when（'/ page2'，...）等

---

redirectTo更新$位置，因此您不必指定.html，而是指定一个routeParameter。

你最好做这样的事情：

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

链接地址: http://www.djcxy.com/p/30977.html

上一篇: Page doesn't redirect to the specified page on invalid url

下一篇: angularjs, use a function in the routing as the templateUrl