在單頁應用程式 (SPA) 的世界中，在沒有框架的情況下管理路由似乎令人畏懼。但是使用 Vanilla JavaScript，您可以創建一個簡單但功能強大的路由系統！ ？
這裡有一個快速入門指南：
SPA 中的路由涉及將 URL 對應到特定視圖或內容。應用程式不會重新載入頁面，而是根據 URL 動態更新內容。
<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"),
});
？ 專業提示：如果您正在建立更大的應用程序，請考慮模組化程式碼並處理查詢參數或嵌套路由等邊緣情況。
你曾經建立過自己的路由系統嗎？在評論中分享您的經驗！ ？
以上是用於單頁應用程式的 JavaScript 路由系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！
