Web-Dev-For-Beginners/translations/zh-HK/7-bank-project/1-template-route/assignment.md

改善路由

指示

既然你已建立基本的路由系統，現在是時候以專業功能加以強化，提升用戶體驗和提供更好的開發工具。實際應用程式不僅僅需要模板切換，還需要動態頁面標題、生命週期掛勾和可擴充架構。

在此作業中，你將擴充你的路由實作，加入兩個常見於生產環境網頁應用程式的重要功能。這些增強會讓你的銀行應用感覺更完善，並為未來功能奠定基礎。

路由宣告目前只包含要使用的模板 ID，但顯示新頁面時有時需要更多資訊。讓我們透過兩個額外功能改進路由實作：

功能一：動態頁面標題

目標： 為每個模板設定標題，並在模板更換時更新瀏覽器視窗標題。

重要原因：

• 提升使用者體驗，顯示具描述性的瀏覽器分頁標題
• 增強輔助技術與螢幕閱讀器的可存取性
• 提供更好的書籤與瀏覽器歷史上下文
• 遵循專業網站開發最佳實務

實作方式：

• 擴充 routes 物件，包含每條路由的標題資訊
• 修改 updateRoute() 函式，動態更新 document.title
• 測試在不同頁面切換時標題是否正常變更

功能二：路由生命週期掛勾

目標： 新增在模板切換後執行程式碼的選項。我們希望每次顯示儀表板頁面時，在開發者控制台印出 'Dashboard is shown'。

重要原因：

• 啟用特定路由載入時執行自訂邏輯
• 提供分析、記錄或初始化程式碼的掛勾
• 建立支援更複雜路由行為的基礎
• 展示網站開發中觀察者模式的概念

實作方式：

• 新增路由設定的可選回呼函式屬性
• 模板渲染完成後執行該回呼函式（如存在）
• 確保此功能能作用於任何含有定義回呼的路由
• 測試造訪儀表板時，控制台訊息是否出現

評分標準

標準	優異	合格	需要改進
	兩項功能皆已實作並正常運作。標題與程式碼新增亦可支援 routes 宣告中添加的新路由。	兩項功能皆可運作，但行為為硬編碼，無法透過 routes 宣告設定。無法或部分可用於添加第三條帶標題與程式碼的路由。	缺少其中一項功能或功能無法正常運作。

---

免責聲明：
本文件乃使用 AI 翻譯服務 Co-op Translator 翻譯而成。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司對因使用此翻譯而引起的任何誤解或誤釋不負任何責任。