摘要：路由過程的個步驟每次點擊鏈接或瀏覽器改變時，路由器都會確保應用程序做出相應的反應。一旦所有的都已完成，其返回值是合并的路徑的然后路由器繼續步驟。你可以使用助記記住路由器經過的步驟的順序。

每次點擊鏈接或瀏覽器URL改變時，Angular路由器都會確保應用程序做出相應的反應。

為了做到這一點，Angular路由器執行以下7個步驟的順序：

解析(Parse)：它解析用戶要導航到的瀏覽器URL。

重定向(Redirect)：它應用URL重定向（如果定義了一個）

標識(Identify)：它標識哪個路由器狀態對應于URL。

警衛(Guard)：它運行在路由器狀態中定義的守衛。

解析(Resolve)：它解決路由器狀態所需的數據。

激活(Activate)：它激活Angular組件來顯示頁面。

管理(Manage)：它管理導航，并在請求新URL時重復該過程。

記住這7個步驟，您可以使用助記PRIGRAM，其中每個字母代表路由過程中的一步：

Parse

Redirect

Identify

Guard

Resolve

Activate

Manage

在我們深度了解每一步之前，讓我們回顧一下，Angular路由器的使用術語。

路由服務(router service): 我們應用程序中的Angular全局路由服務

路由器配置(router configuration)：我們應用程序中的所有可能的路由器狀態的定義

路由器狀態(router state)：路由器在某個時間點的狀態，表示為激活的路由快照樹。

激活的路由快照(activated route snapshot)：提供對路由器狀態節點的URL、參數和數據的訪問

守護(guard)：在加載、激活或停用路由時運行的腳本(script)。

解析器(resolver)：在請求頁面被激活之前獲取數據的腳本

路由器插座(router outlet)：在DOM中，Angular路由器可以放置激活組件的位置

URL片段(URL segments)：URL斜杠部分

如果你不熟悉Angular路由器或任何這些術語聽起來陌生，我強烈建議你先閱讀Use Angular router to resolve data，官方路由指導或Angular主力作者Victor Savkin的書Angular Router

就Angular路由器而言，瀏覽器URL是表示路由器狀態的字符串。由于路由器狀態是一棵樹，Angular路由器本質上考慮了瀏覽器URL的序列化樹。

在路由過程的第1步中，Angular路由器將瀏覽器URL解析為URL樹。

URL樹是一種數據結構，稍后將幫助Angular路由器識別步驟3中的路由器狀態樹。

為了解析URL，Angular使用以下約定：（注：冒號前面是路由器出口，后面是URL片段）

/ => 斜線劃分URL片段

() => 括號指定次要路徑。

: => 冒號指定一個指定的路由器出口。

; => 一個分號指定一個矩陣參數。

? => 一個問號分隔查詢字符串參數。

"#"=> 一個#號標簽列舉片段。

"http://"=> 雙斜線分割多個次要路徑。

例如，在解析下面的URL時：

/section-one;test=one/(nav:navigation;test=two//main:about;test=three)?query=four#frag

angular識別出以下部分（點擊這里獲取更大的版本）：

"section-one", "navigation" 和 "about" 是URL片段

";test=one", ";test=two" 和 ";test=three" 是矩陣參數

"(nav:navigation;test=two)" 是次要路由，列出了出口路由"nav"的 URL片段"navigation"，以及分配了自己的矩陣參數test,值為字符串類型的"two"

(main:about;test=three) 是次要路由，列出了出口路由"main"的 URL片段"about"，以及分配了自己的矩陣參數test,值為字符串類型的"three"

"http://" 用于分隔二級路由。

"?query=four" 分配查詢字符串變量"query"，字符串值為"four"

"#frag" 分配了片段"frag"

矩陣參數的范圍是在路由同級(Matrix parameters are scoped on a route level. )。不同的路由可以具有相同名稱和不同值的矩陣參數。

相反，查詢字符串參數和URL片段的范圍不在路由同級(query string parameters and the fragment are not scoped on a route level)。它們通過路由共享，因此它們的名稱應該是唯一的。

一旦Angular路由器組裝了URL樹，它將繼續到步驟2。

在Angular路由器使用URL樹創建路由器的狀態之前，它會檢查對應的重定向規則。

有兩種不同的重定向類型：

local redirect:

當 "redirectTo" 不是以 "/" 開始

替換成單個URL片段

例如: { path: "one", redirectTo: "two" }

absolute redirect:

當 "redirectTo" 是以 "/" 開始

替換整個URL

例如: { path: "one", redirectTo: "/two" }

Angular路由器遍歷路由器配置。一旦找到匹配的重定向，重定向就被應用，路由器繼續到步驟3。

只有一種重定向規則被應用！

如果路由1重定向到路由2，路由2重定向到路由3，然后路由2重定向路由3不執行，路由2被激活。(If route 1 redirects to route 2, which in turn redirects to route 3, then the second redirect to route 3 is not performed and route 2 is activated.)

此時，Angular路由器擁有一個潛在重定向應用程序的URL樹。

Angular路由器遍歷URL樹，并與路由器配置中配置的路徑匹配URL片段。

如果URL片段與路由的路徑匹配，則路由的子路由與剩余的URL片段匹配，直到所有URL片段匹配為止。

如果沒有找到完全匹配的路由器，回溯到在下一個兄弟的路由找到匹配。

思考下面的路由器配置：

[
  {
    path: "one",
    component: OneComponent,
    children: [
      {
        path: "two/three",
        component: OtherComponent
    ]
  }
]

和下面的URL：

/one/two/three

然后Angular路由器會找到一個由兩條路由組成的匹配：

路徑為"one" 的路由與一個URL片段匹配

路徑為"two/three" 的子路由與兩個URL片段匹配

一旦Angular路由器找到一個完整的匹配，消耗所有的URL段，路由器狀態被構造，路由器繼續到步驟4。

請注意，Angular路由器沒有路由精度的概念。一旦找到完整的匹配，Angular路由器停止處理配置。因此，確保您的路由按正確的順序配置是很重要的。如果您將通配符路由作為第一個路由添加，則不會到達其他路由，通配符路由將始終匹配。因此，您應該始終將通配符路由添加為路由器配置中的最后一條路由。

如果整個路由器配置被處理且沒有匹配，則路由器導航失敗并記錄錯誤。

現在Angular路由器知道要路由哪個路由器狀態，它就運行相關的守護程序來檢查是否允許導航到新的路由器狀態。

首先，它從"最深的子路由"到"頂級"的順序運行下面的守衛進程：

CanDeactivate

CanActivateChild

然后， 它從"頂級"到"最深的子路由"的順序運行下面的守衛進程：

CanActivate

如果新的路由器狀態需要一個模塊被延遲加載，那么下面的守護進程也是運行的：

CanLoad

一個守護者必須返回一個布爾值或一個承諾/可觀察到的值，該值解析為布爾值。

當守護進程返回false值，導航就會被取消。

如果沒有一個守衛返回一個false值，Angular路由器繼續到步驟5。

因為Angular路由器知道新的路由器的狀態可以被激活，它運行相關的resolvers。

在配置過程中，可以使用路由的數據屬性將靜態數據附加到路由：

{
  path: "one",
  component: OneComponent,
  data: {
    name: "Jazz"
  }
}

它允許你在運行時動態地解析數據。然后將新解析的數據合并到數據屬性中的現有靜態數據中：

path: "one",  
component: OneComponent,  
data: {  
  name: "Jazz"
},
resolve: {

  // Return value of AddressResolver will be merged in data
  // and will be available as data.address
  address: AddressResolver
}

resolver 是一個函數或類，具有一個返回值、一個承諾或一個可觀察對象。如果解析器返回一個承諾或一個可觀察對象，Angular路由器在它繼續到步驟6之前等待它完成。

一旦所有的resolve都已完成，其返回值是合并的路徑的data property, 然后Angular路由器繼續步驟6。

在這步里，Angular路由器實例化所需組件并將它們放在DOM中元素正確的相應路由器出口 。

如果一個組件已經在以前的路由器狀態實例化過或者僅僅路由參數發生改變，那么組件就不會重新實例化。但是組件同樣被重新激活( reactivated ), 而且新的參數可以通過可觀察對象activatedroute進行使用。

當所有組件被實例化或重新激活時，Angular路由器會更新瀏覽器URL中的URL。

最后，當新的路由器狀態被顯示到屏幕上時，Angular路由器偵聽URL更改和狀態更改。

一旦發生下列情況之一：

用戶更改瀏覽器URL

用戶點擊一個鏈接（使用 routerlink ）

執行導航命令（使用 router.navigate）

Angular路由器重復整個過程。

在這篇文章中我們學到了當用戶導航從一個頁面到另一個的時候，Angular路由器都做了哪些過程。

你可以使用助記 PRIGRAM：

Parse

Redirect

Identify

Guard

Resolve

Activate

Manage

記住Angular路由器經過的步驟的順序。

了解這個過程將有助于您更好地了解幕后發生的事情，并幫助您調試潛在的路由問題。

下次有人問你，Guard之前或Resolve之后發生了什么，你會知道該說什么。

希望有讀者喜歡！

The 7-step process of Angular router navigation