Angular9 路由與導(dǎo)航

應(yīng)用內(nèi)導(dǎo)航：路由到視圖

在單頁(yè)面應(yīng)用中，你可以通過(guò)顯示或隱藏特定組件的顯示部分來(lái)改變用戶(hù)能看到的內(nèi)容，而不用去服務(wù)器獲取新頁(yè)面。當(dāng)用戶(hù)執(zhí)行應(yīng)用任務(wù)時(shí)，他們要在你預(yù)定義的不同視圖之間移動(dòng)。要想在應(yīng)用的單個(gè)頁(yè)面中實(shí)現(xiàn)這種導(dǎo)航，你可以使用 Angular 的 Router（路由器）。

為了處理從一個(gè)視圖到下一個(gè)視圖之間的導(dǎo)航，你可以使用 Angular 的路由器。路由器會(huì)把瀏覽器 URL 解釋成改變視圖的操作指南，以完成導(dǎo)航。

要探索一個(gè)具備路由器主要功能的示例應(yīng)用，請(qǐng)參見(jiàn)現(xiàn)場(chǎng)演練 / 下載范例。

先決條件 在創(chuàng)建路由之前，你應(yīng)該熟悉以下內(nèi)容：

• 組件的基礎(chǔ)知識(shí)

• 模板的基礎(chǔ)知識(shí)

• 一個(gè) Angular 應(yīng)用，你可以使用 Angular CLI 生成一個(gè)基本的 Angular 應(yīng)用。

有關(guān)這個(gè)現(xiàn)成應(yīng)用的 Angular 簡(jiǎn)介，請(qǐng)參見(jiàn)快速上手。有關(guān)構(gòu)建 Angular 應(yīng)用的更深入體驗(yàn)，請(qǐng)參見(jiàn)英雄指南教程。兩者都會(huì)指導(dǎo)你使用組件類(lèi)和模板。

選擇路由策略

你必須在開(kāi)發(fā)項(xiàng)目的早期就選擇一種路由策略，因?yàn)橐坏┰搼?yīng)用進(jìn)入了生產(chǎn)階段，你網(wǎng)站的訪問(wèn)者就會(huì)使用并依賴(lài)應(yīng)用的這些 URL 引用。

幾乎所有的 Angular 項(xiàng)目都會(huì)使用默認(rèn)的 HTML 5 風(fēng)格。它生成的 URL 更易于被用戶(hù)理解，它也為將來(lái)做服務(wù)端渲染預(yù)留了空間。

在服務(wù)器端渲染指定的頁(yè)面，是一項(xiàng)可以在該應(yīng)用首次加載時(shí)大幅提升響應(yīng)速度的技術(shù)。那些原本需要十秒甚至更長(zhǎng)時(shí)間加載的應(yīng)用，可以預(yù)先在服務(wù)端渲染好，并在少于一秒的時(shí)間內(nèi)完整渲染在用戶(hù)的設(shè)備上。

只有當(dāng)應(yīng)用的 URL 看起來(lái)像是標(biāo)準(zhǔn)的 Web URL，中間沒(méi)有 hash（#）時(shí)，這個(gè)選項(xiàng)才能生效。