Angular UI路由器不符合URL路徑

當我到localhost：3000/login時，我被重定向到localhost：3000/login＃/ login。這是怎麼發生的？如果有問題，我正在使用AngularJS的1.3版本。Angular UI路由器不符合URL路徑

(function() { 
 
    this.app.config([ 
 
'$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
 
    
 
$urlRouterProvider.otherwise('/login'); 
 

 
$stateProvider.state('register', { 
 
    url: '/register', 
 
    templateUrl: '/components/user/register.html', 
 
    controller: 'UserCtrl' 
 
    }).state('login', { 
 
    url: '/login', 
 
    templateUrl: '/assets/components/auth/login.html', 
 
    controller: 'AuthCtrl' 
 
    }); 
 
} 
 
    ]); 
 

 
}).call(this);

來源

2014-10-16 Michael

什麼路徑你的index.html（起點）位於哪裏？ – dannypaz 2014-10-16 20:49:08

對不起 - 我不遵循這個意思。請求「/ login」，並從該端點返回html。 – Michael 2014-10-16 20:51:30

我假設你的html在目錄/登錄內...這就是爲什麼它給你/登錄/＃/登錄。 – dannypaz 2014-10-16 20:57:31

你看到localhost:3000/login#/login的原因是因爲你的$ stateProvider配置使用.otherwise路線都到#/login。第一個/login是到您的單頁應用程序（SPA）檢索HTML的端點的URL路徑的一部分 - 它是您的基本URL的一部分。

對於開始使用SPA的開發人員來說，它可能會與直覺相反，即應用程序中的「導航」實際上並未更改URL路徑 - 從而改變了服務器的端點。因爲沒有HTTP請求或HTTP-302重定向。應用程序（或Angular，在這種情況下）只改變URL的片段（＃）部分 - 這就是$ stateProvider或$ routeProvider「導航」的工作方式。

因此，您在SPA中配置的路線確定「邏輯上」顯示哪個視圖。儘管視圖的內容可以從外部URL加載，但與「路由」定義本身無關。

確定您的SPA將住在哪裏。確定什麼屬於您的SPA，哪些不是 - 並且將由不同的端點提供服務。在SPA內，通過#/path/to/view風格路線「導航」。通過$location.path更改網址，將您的SPA外部導航到不同的端點。

==同一端點/不同的「路線」 - 相同的應用程序的一部分：

baseurl.com/basePath#/about 
baseurl.com/basePath#/login 
baseurl.com/basePath#/product/153

==不同端點 - 不同的應用程序。每一個是一個HTTP請求給服務器：

baseurl.com/basePath/about 
baseurl.com/basePath/login 
baseurl.com/basePath/product/153/

EDIT：

它可以使用/page-view/other/params而不#，結果發現。看看下面的SO question。

總之，這就是所謂的HTML5模式，它可以用$ locationProvider配置：

$locationProvider.html5Mode(true);

然而，這需要在服務器上多一點的配置也比較配置：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

來源

2014-10-16 22:32:34

假設我希望有人通過轉到localhost：3000/login訪問登錄頁面。我的路由代碼應該是什麼樣子？我需要使用urlRouterProvider而不是stateProvider嗎？ – Michael 2014-10-16 22:40:57

如果您在'/ login'下執行典型的表單身份驗證，那麼它位於您的應用程序之外。您只需將HTTP重定向到'/ login'，並在成功驗證後重定向迴應用程序。 – 2014-10-16 22:43:26

單頁應用就是這樣 - 單頁。所以你實際上並沒有改變端點。整個應用程序生活在一個終點。 – 2014-10-16 22:44:35

Angular UI路由器不符合URL路徑

回答

相關問題