用於單頁應用程式的 JavaScript 路由系統

？使用 Vanilla JavaScript 為 SPA 建立簡單的路由系統

在單頁應用程式 (SPA) 的世界中，在沒有框架的情況下管理路由似乎令人畏懼。但是使用 Vanilla JavaScript，您可以創建一個簡單但功能強大的路由系統！ ？

---

這裡有一個快速入門指南：

1️⃣ 了解路由的基礎知識

SPA 中的路由涉及將 URL 對應到特定視圖或內容。應用程式不會重新載入頁面，而是根據 URL 動態更新內容。

2️⃣ 核心概念

• 基於雜湊的路由：使用window.location.hash（例如/#/home）。簡單，不需要伺服器配置。
• 歷史API：利用pushState和popstate來獲得更清晰的URL（例如/home）。

3️⃣ 建置步驟

第 1 步：設定 HTML 結構

<div>



<h3>
  
  
  <strong>Step 2: Create the Router</strong>
</h3>



<pre class="brush:php;toolbar:false">class Router {
  constructor(routes) {
    this.routes = routes;
    this.init();
  }

  init() {
    window.addEventListener("hashchange", () => this.handleRouteChange());
    this.handleRouteChange();
  }

  handleRouteChange() {
    const currentPath = window.location.hash.slice(1);
    const route = this.routes[currentPath];
    if (route) {
      route();
    } else {
      this.routes["/404"]();
    }
  }
}

// Usage
const router = new Router({
  "/": () => (document.getElementById("root").innerHTML = "Home Page"),
  "/about": () => (document.getElementById("root").innerHTML = "About Page"),
  "/404": () => (document.getElementById("root").innerHTML = "404 Page"),
});

4️⃣ 增強

• 使用歷史 API 獲得更清晰的 URL。
• 延遲載入內容或模板以獲得更好的效能。
• 新增 404 和後備路由以改善使用者體驗。

為什麼要自己建構這個？

• 深入理解：了解路由背後的機制。
• 靈活性：根據您的需求進行定制，不受庫的限制。
• 效能：避免外部依賴的開銷。

---

？ 專業提示：如果您正在建立更大的應用程序，請考慮模組化程式碼並處理查詢參數或嵌套路由等邊緣情況。

你曾經建立過自己的路由系統嗎？在評論中分享您的經驗！ ？

以上是用於單頁應用程式的 JavaScript 路由系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！