Angular9 LocationStrategy 和瀏覽器網(wǎng)址樣式

當(dāng)路由器導(dǎo)航到一個(gè)新的組件視圖時(shí)，它會(huì)用該視圖的 URL 來(lái)更新瀏覽器的當(dāng)前地址以及歷史。 嚴(yán)格來(lái)說(shuō)，這個(gè) URL 其實(shí)是本地的，瀏覽器不會(huì)把該 URL 發(fā)給服務(wù)器，并且不會(huì)重新加載此頁(yè)面。

現(xiàn)代 HTML 5 瀏覽器支持 history.pushState API， 這是一項(xiàng)可以改變?yōu)g覽器的當(dāng)前地址和歷史，卻又不會(huì)觸發(fā)服務(wù)端頁(yè)面請(qǐng)求的技術(shù)。 路由器可以合成出一個(gè)“自然的”URL，它看起來(lái)和那些需要進(jìn)行頁(yè)面加載的 URL 沒(méi)什么區(qū)別。

下面是危機(jī)中心的 URL 在 “HTML 5 pushState” 風(fēng)格下的樣子：

老舊的瀏覽器在當(dāng)前地址的 URL 變化時(shí)總會(huì)往服務(wù)器發(fā)送頁(yè)面請(qǐng)求……唯一的例外規(guī)則是：當(dāng)這些變化位于 “#”（被稱(chēng)為“hash”）后面時(shí)不會(huì)發(fā)送。通過(guò)把應(yīng)用內(nèi)的路由 URL 拼接在 # 之后，路由器可以獲得這條“例外規(guī)則”帶來(lái)的優(yōu)點(diǎn)。下面是到危機(jī)中心路由的 “hash URL”：

路由器通過(guò)兩種 LocationStrategy 提供者來(lái)支持所有這些風(fēng)格：

PathLocationStrategy - 默認(rèn)的策略，支持 “HTML 5 pushState” 風(fēng)格。

HashLocationStrategy - 支持 “hash URL” 風(fēng)格。

RouterModule.forRoot() 函數(shù)把 LocationStrategy 設(shè)置成了 PathLocationStrategy，使其成為了默認(rèn)策略。 你還可以在啟動(dòng)過(guò)程中改寫(xiě)（override）它，來(lái)切換到 HashLocationStrategy 風(fēng)格。