AngularJS UI路由器：路由衝突，因爲可選參數

我在AngularJS應用程序中有幾條路線，我使用UI-Router在我的站點中的狀態/頁面之間進行路由。我遇到的一個問題是，由於我有/需要網站主頁的可選參數，因此我的路線衝突。AngularJS UI路由器：路由衝突，因爲可選參數

我有個路線用於主頁（example.com）定義更多或更少的，像這樣：

$stateProvider 
    .state('home', { 
     url: '/:filter', 
     params: { 
      filter: { squash: true, value: null } 
     } 
    });

我可以通過進入主頁（example.com）激活該狀態下，以及通過添加可選參數example.com/apples我用它來過濾主頁上的內容。現在

我的問題是，我已經等航線一樣/login，，/help和去example.com/login或example.com/help定義，只會激活，因爲我已經定義了/:filter可選佔位符參數，它捕獲以下/任何路線的home狀態。

一種解決方法我都試過被添加斜線到我的其他路由定義和鏈接url: /login/並激活：example.com/login/其作品，但我將無法使用UI路由器的ui-sref指令通過名字來引用我的狀態，而不是我的應用程序中的URL和尾部的斜線看起來很醜陋。

我想實現的是能夠有可選參數的網頁/:filter，仍然能夠去我的其他途徑/login，/register等。而不必通過添加結尾的斜槓要解決它。

有沒有人曾經在這種或類似的情況？非常感謝任何見解或建議。提前致謝。

來源

2015-09-04 Daniel Sandiego

有a working example

這裏的關鍵是確定的家鄉在最後：

// this url will be registered as first 
.state('login', { 
     url: "/login", 
     templateUrl: 'tpl.html', 
}) 
// this as second 
.state('about', { 
     url: "/about", 
     templateUrl: 'tpl.html', 
}) 
... 
// this will be registered as the last 
.state('home', { 
     url: "/:filter", 
     templateUrl: 'tpl.html', 
     params: { 
     filter: { squash: true, value: null } 
     } 
})

UI-路由器迭代的順序登記狀態，並試圖找出第一個匹配。通過這種方式 - 所有其他國家（登錄，約）將有「家」的狀態優先......

檢查它here

來源

2015-09-04 16:03:27

啊，所以UI，路由器將通過它們被定義的順序登記狀態迭代。然而，我的路線是在模塊中定義的，我的意思是我的角度應用程序被分解爲模塊，例如登錄頁面是模塊，頁面是模塊等，並且它們的路線在每個模塊內定義。然後通過應用程序模塊將這些模塊組合在一起。有沒有辦法做到這一點，而不必定義一個$ stateProvider或模塊內的每條路線？ –

我會說 - 模塊是不同的話題，在這裏。它可能是很多模塊，它可能只是一個。我使用幾個模塊，具有真正獨特的URL前綴...所以最後並不重要。但就你而言，最重要的是**國家註冊**的順序。現在有辦法。簡單的UI路由器必須找到某種方式，如何決定優先級。並且按照設計順序進行註冊。希望它有一點幫助... –

是的，它確實有幫助！像很多，我的路由衝突已被解決，因爲你的回答，特別是你的評論**國家註冊**的順序。非常感謝你，這是我的一天+試圖解決這個問題。乾杯! –

最佳實踐會說，這也許應該是一個查詢字符串參數，而不是一個路線因爲您正在使用它來過濾數據。與UI路由器這樣做只是定義它，像這樣：

$stateProvider 
.state('home', { 
    url: '/?filter' 
});

現在只是做

$state.go('home', {filter: 'apples'})

來源

2015-09-04 16:32:42

AngularJS UI路由器：路由衝突，因爲可選參數

回答

相關問題