# 改善路由 ## 指示 現在你已經建立了基本的路由系統，是時候用專業功能來增強它，以改善使用者體驗並提供更好的開發工具。實際應用程式需要的不僅是模板切換－它們需要動態頁面標題、生命週期鉤子和可擴充的架構。 在此作業中，你將擴展你的路由實現，加入兩個在生產網頁應用中常見的基本功能。這些增強將讓你的銀行應用感覺更完善，並為未來功能打下基礎。 路由宣告目前只包含要使用的模板 ID，但在顯示新頁面時，有時需要更多資訊。讓我們用兩個額外功能來改善我們的路由實作： ### 功能 1：動態頁面標題 **目標：** 為每個模板指定標題，並在模板變更時動態更新視窗標題。 **重要性：** - **提升**使用者體驗，顯示具描述性的瀏覽器分頁標題 - **增強**輔助技術如螢幕閱讀器的可用性 - **提供**更好的書籤和瀏覽器歷史記錄上下文 - **遵循**專業網頁開發最佳實務 **實作方向：** - **擴充** routes 物件以包含每個路由的標題資訊 - **修改** `updateRoute()` 函式，使其動態更新 `document.title` - **測試**在切換不同畫面時標題是否正確變更 ### 功能 2：路由生命週期鉤子 **目標：** 新增選項可在模板變更後執行某段程式碼。我們希望每次顯示「Dashboard」頁面時，都在開發者主控台印出 `'Dashboard is shown'`。 **重要性：** - **允許**在特定路由載入時執行自定義邏輯 - **提供**分析、紀錄或初始化程式碼的鉤子 - **建立**更複雜路由行為的基礎 - **展現**網頁開發中的觀察者模式 **實作方向：** - **加入**選用的回呼函式屬性至路由設定 - **在**模板渲染完成後執行該回呼函式（若有定義） - **確保**此功能對所有帶回呼的路由有效 - **測試**訪問 Dashboard 時，主控台訊息是否顯示 ## 評量標準 | 標準 | 優異 | 及格 | 需改進 | | -------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | | | 兩項功能皆已實作且可運作。對 `routes` 宣告新增的路由也適用標題及程式碼加入功能。 | 兩項功能可運作，但行為為硬編碼，且無法透過 `routes` 宣告設定。新增第三個有標題及程式碼的路由時，功能無法或部分運作。 | 有一項功能缺失或無法正常運作。 | --- **免責聲明**： 本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們努力追求準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯承擔任何責任。