摘要：路由過(guò)程的個(gè)步驟每次點(diǎn)擊鏈接或?yàn)g覽器改變時(shí)，路由器都會(huì)確保應(yīng)用程序做出相應(yīng)的反應(yīng)。一旦所有的都已完成，其返回值是合并的路徑的然后路由器繼續(xù)步驟。你可以使用助記記住路由器經(jīng)過(guò)的步驟的順序。

每次點(diǎn)擊鏈接或?yàn)g覽器URL改變時(shí)，Angular路由器都會(huì)確保應(yīng)用程序做出相應(yīng)的反應(yīng)。

為了做到這一點(diǎn)，Angular路由器執(zhí)行以下7個(gè)步驟的順序：

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

重定向(Redirect)：它應(yīng)用URL重定向（如果定義了一個(gè)）

標(biāo)識(shí)(Identify)：它標(biāo)識(shí)哪個(gè)路由器狀態(tài)對(duì)應(yīng)于URL。

警衛(wèi)(Guard)：它運(yùn)行在路由器狀態(tài)中定義的守衛(wèi)。

解析(Resolve)：它解決路由器狀態(tài)所需的數(shù)據(jù)。

激活(Activate)：它激活A(yù)ngular組件來(lái)顯示頁(yè)面。

管理(Manage)：它管理導(dǎo)航，并在請(qǐng)求新URL時(shí)重復(fù)該過(guò)程。

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

Parse

Redirect

Identify

Guard

Resolve

Activate

Manage

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

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

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

路由器狀態(tài)(router state)：路由器在某個(gè)時(shí)間點(diǎn)的狀態(tài)，表示為激活的路由快照樹(shù)。

激活的路由快照(activated route snapshot)：提供對(duì)路由器狀態(tài)節(jié)點(diǎn)的URL、參數(shù)和數(shù)據(jù)的訪問(wèn)

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

解析器(resolver)：在請(qǐng)求頁(yè)面被激活之前獲取數(shù)據(jù)的腳本

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

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

如果你不熟悉Angular路由器或任何這些術(shù)語(yǔ)聽(tīng)起來(lái)陌生，我強(qiáng)烈建議你先閱讀Use Angular router to resolve data，官方路由指導(dǎo)或Angular主力作者Victor Savkin的書(shū)Angular Router

就Angular路由器而言，瀏覽器URL是表示路由器狀態(tài)的字符串。由于路由器狀態(tài)是一棵樹(shù)，Angular路由器本質(zhì)上考慮了瀏覽器URL的序列化樹(shù)。

在路由過(guò)程的第1步中，Angular路由器將瀏覽器URL解析為URL樹(shù)。

URL樹(shù)是一種數(shù)據(jù)結(jié)構(gòu)，稍后將幫助Angular路由器識(shí)別步驟3中的路由器狀態(tài)樹(shù)。

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

/ => 斜線劃分URL片段

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

: => 冒號(hào)指定一個(gè)指定的路由器出口。

; => 一個(gè)分號(hào)指定一個(gè)矩陣參數(shù)。

? => 一個(gè)問(wèn)號(hào)分隔查詢字符串參數(shù)。

"#"=> 一個(gè)#號(hào)標(biāo)簽列舉片段。

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

例如，在解析下面的URL時(shí)：

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

angular識(shí)別出以下部分（點(diǎn)擊這里獲取更大的版本）：

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

";test=one", ";test=two" 和 ";test=three" 是矩陣參數(shù)

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

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

"http://" 用于分隔二級(jí)路由。

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

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

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

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

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

在Angular路由器使用URL樹(shù)創(chuàng)建路由器的狀態(tài)之前，它會(huì)檢查對(duì)應(yīng)的重定向規(guī)則。

有兩種不同的重定向類(lèi)型：

local redirect:

當(dāng) "redirectTo" 不是以 "/" 開(kāi)始

替換成單個(gè)URL片段

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

absolute redirect:

當(dāng) "redirectTo" 是以 "/" 開(kāi)始

替換整個(gè)URL

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

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

只有一種重定向規(guī)則被應(yīng)用！

如果路由1重定向到路由2，路由2重定向到路由3，然后路由2重定向路由3不執(zhí)行，路由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.)

此時(shí)，Angular路由器擁有一個(gè)潛在重定向應(yīng)用程序的URL樹(shù)。

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

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

如果沒(méi)有找到完全匹配的路由器，回溯到在下一個(gè)兄弟的路由找到匹配。

思考下面的路由器配置：

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

和下面的URL：

/one/two/three

然后Angular路由器會(huì)找到一個(gè)由兩條路由組成的匹配：

路徑為"one" 的路由與一個(gè)URL片段匹配

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

一旦Angular路由器找到一個(gè)完整的匹配，消耗所有的URL段，路由器狀態(tài)被構(gòu)造，路由器繼續(xù)到步驟4。

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

如果整個(gè)路由器配置被處理且沒(méi)有匹配，則路由器導(dǎo)航失敗并記錄錯(cuò)誤。

現(xiàn)在Angular路由器知道要路由哪個(gè)路由器狀態(tài)，它就運(yùn)行相關(guān)的守護(hù)程序來(lái)檢查是否允許導(dǎo)航到新的路由器狀態(tài)。

首先，它從"最深的子路由"到"頂級(jí)"的順序運(yùn)行下面的守衛(wèi)進(jìn)程：

CanDeactivate

CanActivateChild

然后， 它從"頂級(jí)"到"最深的子路由"的順序運(yùn)行下面的守衛(wèi)進(jìn)程：

CanActivate

如果新的路由器狀態(tài)需要一個(gè)模塊被延遲加載，那么下面的守護(hù)進(jìn)程也是運(yùn)行的：

CanLoad

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

當(dāng)守護(hù)進(jìn)程返回false值，導(dǎo)航就會(huì)被取消。

如果沒(méi)有一個(gè)守衛(wèi)返回一個(gè)false值，Angular路由器繼續(xù)到步驟5。

因?yàn)锳ngular路由器知道新的路由器的狀態(tài)可以被激活，它運(yùn)行相關(guān)的resolvers。

在配置過(guò)程中，可以使用路由的數(shù)據(jù)屬性將靜態(tài)數(shù)據(jù)附加到路由：

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

它允許你在運(yùn)行時(shí)動(dòng)態(tài)地解析數(shù)據(jù)。然后將新解析的數(shù)據(jù)合并到數(shù)據(jù)屬性中的現(xiàn)有靜態(tài)數(shù)據(jù)中：

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 是一個(gè)函數(shù)或類(lèi)，具有一個(gè)返回值、一個(gè)承諾或一個(gè)可觀察對(duì)象。如果解析器返回一個(gè)承諾或一個(gè)可觀察對(duì)象，Angular路由器在它繼續(xù)到步驟6之前等待它完成。

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

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

如果一個(gè)組件已經(jīng)在以前的路由器狀態(tài)實(shí)例化過(guò)或者僅僅路由參數(shù)發(fā)生改變，那么組件就不會(huì)重新實(shí)例化。但是組件同樣被重新激活( reactivated ), 而且新的參數(shù)可以通過(guò)可觀察對(duì)象activatedroute進(jìn)行使用。

當(dāng)所有組件被實(shí)例化或重新激活時(shí)，Angular路由器會(huì)更新瀏覽器URL中的URL。

最后，當(dāng)新的路由器狀態(tài)被顯示到屏幕上時(shí)，Angular路由器偵聽(tīng)URL更改和狀態(tài)更改。

一旦發(fā)生下列情況之一：

用戶更改瀏覽器URL

用戶點(diǎn)擊一個(gè)鏈接（使用 routerlink ）

執(zhí)行導(dǎo)航命令（使用 router.navigate）

Angular路由器重復(fù)整個(gè)過(guò)程。

在這篇文章中我們學(xué)到了當(dāng)用戶導(dǎo)航從一個(gè)頁(yè)面到另一個(gè)的時(shí)候，Angular路由器都做了哪些過(guò)程。

你可以使用助記 PRIGRAM：

Parse

Redirect

Identify

Guard

Resolve

Activate

Manage

記住Angular路由器經(jīng)過(guò)的步驟的順序。

了解這個(gè)過(guò)程將有助于您更好地了解幕后發(fā)生的事情，并幫助您調(diào)試潛在的路由問(wèn)題。

下次有人問(wèn)你，Guard之前或Resolve之后發(fā)生了什么，你會(huì)知道該說(shuō)什么。

希望有讀者喜歡！

The 7-step process of Angular router navigation