在單頁應用中，監(jiān)聽路由變化可通過兩種方式實現(xiàn)：1. 使用 hashchange 事件適用于基于 hash 的路由，通過監(jiān)聽 url 中 hash 部分的變化觸發(fā)頁面更新，兼容性好但 url 不夠美觀；2. 使用 history api 的 pushstate / replacestate 方法結(jié)合 popstate 事件適用于 html5 路由，url 更美觀且利于 SEO，但兼容性相對較差，需注意手動處理初始加載和低版本瀏覽器兼容問題。
單頁應用（SPA）中，監(jiān)聽路由變化是實現(xiàn)頁面內(nèi)容動態(tài)更新的關(guān)鍵。本質(zhì)上，我們需要在路由改變時觸發(fā)相應的事件，執(zhí)行更新頁面的邏輯。
解決方案
在 JavaScript 中，監(jiān)聽路由變化主要有兩種方式：使用 hashchange 事件（適用于基于 hash 的路由），以及使用 History API 的 pushState 和 replaceState 方法結(jié)合 popstate 事件（適用于 HTML5 History API 路由）。
1. 基于 Hash 的路由監(jiān)聽：hashchange 事件
當 URL 的 hash 部分（# 及其后面的內(nèi)容）發(fā)生改變時，window 對象會觸發(fā) hashchange 事件。我們可以通過監(jiān)聽這個事件來得知路由的變化。
window.addEventListener('hashchange', function(event) { // event.oldURL：之前的完整 URL // event.newURL：現(xiàn)在的完整 URL console.log('路由改變了！'); console.log('舊的 URL：', event.oldURL); console.log('新的 URL：', event.newURL); // 在這里編寫處理路由變化的代碼，例如更新頁面內(nèi)容 updatePageContent(window.location.hash); }); function updatePageContent(hash) { // 根據(jù) hash 值來加載不同的內(nèi)容 switch (hash) { case '#/home': // 加載首頁內(nèi)容 console.log('加載首頁'); break; case '#/about': // 加載關(guān)于頁面內(nèi)容 console.log('加載關(guān)于頁面'); break; default: // 加載默認內(nèi)容或顯示 404 頁面 console.log('加載默認頁面或 404'); } }
這種方式的優(yōu)點是兼容性好，幾乎所有瀏覽器都支持。缺點是 URL 中始終帶有 #，不夠美觀，并且不利于 SEO。
2. 基于 History API 的路由監(jiān)聽：pushState / replaceState 和 popstate 事件
HTML5 History API 提供了 pushState 和 replaceState 方法，可以在不刷新頁面的情況下修改 URL，并且可以操作瀏覽器的歷史記錄。 popstate 事件在用戶點擊瀏覽器的前進或后退按鈕時觸發(fā)。
// 監(jiān)聽 popstate 事件 window.addEventListener('popstate', function(event) { // event.state：通過 pushState 或 replaceState 傳遞的狀態(tài)對象 console.log('popstate 事件觸發(fā)！'); console.log('狀態(tài)對象：', event.state); // 在這里編寫處理路由變化的代碼，例如更新頁面內(nèi)容 updatePageContent(window.location.pathname); }); // 使用 pushState 修改 URL function navigateTo(path, state) { history.pushState(state, null, path); // 第一個參數(shù)是狀態(tài)對象，第二個參數(shù)是標題（已廢棄），第三個參數(shù)是 URL updatePageContent(path); } function updatePageContent(pathname) { // 根據(jù) pathname 來加載不同的內(nèi)容 switch (pathname) { case '/home': // 加載首頁內(nèi)容 console.log('加載首頁'); break; case '/about': // 加載關(guān)于頁面內(nèi)容 console.log('加載關(guān)于頁面'); break; default: // 加載默認內(nèi)容或顯示 404 頁面 console.log('加載默認頁面或 404'); } } // 示例：點擊鏈接時，使用 navigateTo 修改 URL document.getElementById('home-link').addEventListener('click', function(event) { event.preventDefault(); // 阻止默認的鏈接跳轉(zhuǎn)行為 navigateTo('/home', { page: 'home' }); // 跳轉(zhuǎn)到 /home，并傳遞狀態(tài)對象 }); document.getElementById('about-link').addEventListener('click', function(event) { event.preventDefault(); navigateTo('/about', { page: 'about' }); });
需要注意的是，直接在瀏覽器地址欄輸入 URL 并回車，或者刷新頁面，popstate 事件不會觸發(fā)。因此，需要在頁面加載時手動調(diào)用 updatePageContent 函數(shù)，根據(jù)當前的 URL 來加載內(nèi)容。
History API 的優(yōu)點是 URL 美觀，有利于 SEO。缺點是兼容性相對較差，需要考慮低版本瀏覽器的兼容性處理（可以使用 polyfill）。
3. 使用第三方路由庫
現(xiàn)在有很多成熟的 JavaScript 路由庫，例如 vue router、React Router 等。這些庫封裝了底層的路由監(jiān)聽邏輯，提供了更高級的 API，方便開發(fā)者使用。 使用這些庫通常能夠更高效地管理單頁應用的路由。 例如，使用 Vue Router，你可以定義路由規(guī)則，并使用
如何處理初始加載時的路由？
在頁面首次加載時，popstate 事件不會觸發(fā)，因此需要手動處理初始路由。
// 在頁面加載完成后，手動處理初始路由 window.addEventListener('load', function() { updatePageContent(window.location.pathname); });
這樣，當頁面加載完成后，會根據(jù)當前的 URL 來加載相應的內(nèi)容。
如何優(yōu)雅地管理路由狀態(tài)？
使用 History API 的 pushState 和 replaceState 方法時，可以傳遞一個狀態(tài)對象。這個狀態(tài)對象可以在 popstate 事件中獲取到。利用這個狀態(tài)對象，可以方便地管理路由狀態(tài)，例如保存當前頁面的滾動位置、表單數(shù)據(jù)等。
// 在 pushState 中傳遞狀態(tài)對象 history.pushState({ scrollPosition: 0 }, null, '/home'); // 在 popstate 事件中獲取狀態(tài)對象 window.addEventListener('popstate', function(event) { const scrollPosition = event.state.scrollPosition; // 恢復滾動位置 window.scrollTo(0, scrollPosition); });
如何處理 404 頁面？
在單頁應用中，如果用戶訪問了一個不存在的路由，需要顯示 404 頁面。可以在 updatePageContent 函數(shù)中添加一個默認的 case，用于處理未知的路由。
function updatePageContent(pathname) { switch (pathname) { case '/home': // 加載首頁內(nèi)容 break; case '/about': // 加載關(guān)于頁面內(nèi)容 break; default: // 加載 404 頁面 load404Page(); } }
如何實現(xiàn)路由守衛(wèi)？
路由守衛(wèi)用于控制用戶是否有權(quán)限訪問某個路由。例如，可以根據(jù)用戶的登錄狀態(tài)來判斷是否允許訪問某些頁面。可以在路由變化時，先執(zhí)行路由守衛(wèi)函數(shù)，如果用戶沒有權(quán)限訪問，則跳轉(zhuǎn)到其他頁面。
function routeGuard(pathname) { if (pathname === '/admin' && !isLoggedIn()) { // 如果用戶未登錄，并且嘗試訪問 /admin 頁面，則跳轉(zhuǎn)到登錄頁面 navigateTo('/login'); return false; // 阻止繼續(xù)執(zhí)行 } return true; // 允許繼續(xù)執(zhí)行 } function updatePageContent(pathname) { if (!routeGuard(pathname)) { return; // 如果路由守衛(wèi)返回 false，則不加載頁面內(nèi)容 } switch (pathname) { case '/home': // 加載首頁內(nèi)容 break; case '/about': // 加載關(guān)于頁面內(nèi)容 break; case '/admin': // 加載管理頁面內(nèi)容 break; default: // 加載 404 頁面 load404Page(); } }
這些技巧可以幫助你更好地監(jiān)聽和管理單頁應用的路由變化，構(gòu)建更流暢、更用戶友好的 Web 應用。
