99热精国产这里只有精品,好吊色欧美一区二区三区四区,а天堂中文官网

html函數(shù)如何實現(xiàn)前端路由切換 html函數(shù)History API的簡單應(yīng)用

星夢妙者

發(fā)布： 2025-10-16 12:58:02

原創(chuàng)

278人瀏覽過

前端路由可通過History API實現(xiàn)，利用pushState修改URL并添加歷史記錄，結(jié)合onpopstate監(jiān)聽前進(jìn)后退操作，通過render函數(shù)動態(tài)更新頁面內(nèi)容，實現(xiàn)無刷新導(dǎo)航；需注意服務(wù)器配置fallback以支持直接訪問子路由。

html函數(shù)如何實現(xiàn)前端路由切換 html函數(shù)history api的簡單應(yīng)用

前端路由切換可以通過瀏覽器的 History API 實現(xiàn)，無需依賴框架。利用 history.pushState() 和監(jiān)聽 popstate 事件，就能在不刷新頁面的情況下更新視圖，模擬多頁應(yīng)用的導(dǎo)航體驗。

History API 核心方法

HTML5 提供了 History API 來操作瀏覽器會話歷史。關(guān)鍵方法包括：

history.pushState(state, title, url)：添加一條新記錄到歷史棧，并改變當(dāng)前 URL（不會觸發(fā)頁面刷新）
history.replaceState(state, title, url)：替換當(dāng)前歷史記錄條目
window.onpopstate：當(dāng)用戶點擊前進(jìn)/后退按鈕時觸發(fā)

實現(xiàn)簡單前端路由

以下是一個純 HTML + JavaScript 的簡單路由示例：

<!DOCTYPE html>
<html>
<head>
  <title>簡易前端路由</title>
</head>
<body>

  <nav>
    <a href="/home" onclick="navigate(event)">首頁</a>
    <a href="/about" onclick="navigate(event)">關(guān)于</a>
    <a href="/contact" onclick="navigate(event)">聯(lián)系</a>
  </nav>

  <div id="content"></div>

  <script>
    // 頁面內(nèi)容映射
    const routes = {
      '/home': '<h1>這是首頁</h1>',
      '/about': '<h1>這是關(guān)于頁</h1>',
      '/contact': '<h1>這是聯(lián)系頁</h1>'
    };

    // 導(dǎo)航函數(shù)
    function navigate(event) {
      event.preventDefault(); // 阻止默認(rèn)跳轉(zhuǎn)
      const url = event.target.getAttribute('href');
      history.pushState({}, '', url); // 更新URL
      render(url);
    }

    // 渲染對應(yīng)頁面
    function render(url) {
      document.getElementById('content').innerHTML = routes[url] || '<h1>404 頁面未找到</h1>';
    }

    // 監(jiān)聽瀏覽器前進(jìn)后退
    window.onpopstate = function() {
      render(location.pathname);
    };

    // 初始化頁面加載
    window.onload = function() {
      render(location.pathname || '/home');
    };
  </script>

</body>
</html>

登錄后復(fù)制