頁面不重定向到無效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'}) 

}]);

我有一個側邊欄導航控制。我創建了4頁。

所以，當我點擊這些導航項時，相應的頁面將正確打開。

還有一些我還沒有創建的頁面。但是按照下面的函數。

當我沒有不存在的東西時，它必須返回到文件夾根目錄中存在的404.html文件。

發生了什麼事情，我沒有在控制檯中看到錯誤，地址欄中的url反映了最後一次點擊的有效頁面。

有人讓我知道我在做什麼錯誤，以及這種方法對於動態路由是否正確？

來源

2014-07-21 Unknown User

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

還參見本short demo。

來源

2014-07-21 10:52:03 gkalpak

非常感謝。非常理解。我還有一個疑問。有了我以前的功能，即使我去了一個不存在的網址。我不會路由到'404.html'文件。你能說我爲什麼嗎？並且在控制檯中出現錯誤：GET：（我指定的URL）404 - 未找到。 –

您正在使用'redirectTo'來表示HTML文件。 'redirectTo'用於重定向到路由。您應該使用'otherwise（{templateUrl：'404.html'}）'代替。 – gkalpak

哦..明白了。現在清除了我。非常感謝。 –

-1

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

你最好做這樣的事情：

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

來源

2014-07-21 10:40:35 Ferox

不錯的建議，但它與問題無關...... – gkalpak

否則將被調用時，沒有其他的定義相匹配。但是你的/：頁面定義總是匹配的，否則不會被調用。當嘗試加載模板時，其他定義不會對來自服務器的404做出反應。

爲每個頁面創建路由定義的最簡單解決方案，而不是通用解決方案。例如。當（「/第1頁」，...）。當（「/第2頁」，...）等

來源

2014-07-21 10:50:25 Sabacc

頁面不重定向到無效url上的指定頁面

回答

相關問題