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` 宣告設定。無法或部分可用於添加第三條帶標題與程式碼的路由。                                                                          | 缺少其中一項功能或功能無法正常運作。                  |

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：  
本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司對因使用此翻譯而引起的任何誤解或誤釋不負任何責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->