用于单页应用程序的 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中文网其他相关文章！