用于单页应用程序的 JavaScript 路由系统-js教程-PHP中文网

用于单页应用程序的 JavaScript 路由系统

DDD

发布： 2024-12-13 13:50:11

原创

900 人浏览过

A routing system in JavaScript for Single Page Application

？使用 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"),
});

登录后复制