做后臺管理系統(tǒng)或者企業(yè)官網(wǎng)的時候?qū)Ш綑诙际抢@不開的東西。正常情況下用戶點一下導(dǎo)航按鈕按鈕背景色高亮內(nèi)容區(qū)域跟著切過去URL路徑也一起變這一套流程順下來沒什么感覺。但等真正部署上線用戶隨便刷新一下瀏覽器問題就來了——高亮狀態(tài)丟了有的甚至路徑也回了默認頁整個導(dǎo)航看起來像是失靈了一樣。我最早遇到這個問題是在一個傳統(tǒng)的多頁面項目里當時以為是瀏覽器緩存清了一遍又一遍結(jié)果還是老樣子。后來仔細捋了一遍代碼才發(fā)現(xiàn)根本不是緩存的事而是我壓根沒把“導(dǎo)航高亮”和“URL路徑”當成一條線來對待。點擊事件里改了按鈕樣式但沒同步路徑刷新的時候也沒有反查當前路徑去恢復(fù)高亮兩個邏輯各干各的狀態(tài)自然就丟了。這個問題看起來小實際踩坑的人不少尤其是不太熟悉瀏覽器路由機制的同學很容易陷在“我明明設(shè)置了樣式怎么會丟”的困惑里。這篇文章我就用實際項目的經(jīng)驗把導(dǎo)航欄按鈕背景色切換、刷新后狀態(tài)保持、路徑同步這幾個點徹底聊透包括原生JavaScript的實現(xiàn)、Vue / uni-app等框架環(huán)境的處理方案以及一些排查問題的實用技巧。1. 問題現(xiàn)象與根因分析1.1 三個典型表現(xiàn)場景先說常見的表現(xiàn)排查問題之前得先分清自己屬于哪種情況。第一種刷新后高亮丟了但路徑是對的。這是最典型的情況。你點了“數(shù)據(jù)看板”這個導(dǎo)航按鈕地址欄變成了/dashboard按鈕背景色也變藍了但按一下F5頁面內(nèi)容還是數(shù)據(jù)看板導(dǎo)航高亮卻回到了默認第一個按鈕。這種現(xiàn)象說明你的高亮狀態(tài)只存在于內(nèi)存里頁面一刷新JavaScript重新執(zhí)行所有DOM回到了初始狀態(tài)之前加的class全部被清掉了。第二種點擊后背景色切換了但地址欄路徑壓根沒變。這種情況比第一種更隱蔽。很多同學會用a標簽做導(dǎo)航按鈕然后在點擊事件里e.preventDefault()阻止了默認跳轉(zhuǎn)想著自己用JS去控制頁面切換但寫著寫著就只處理了樣式跳轉(zhuǎn)邏輯漏掉了。表現(xiàn)出來就是按鈕變亮了但路徑?jīng)]變刷新一下又回到原來的狀態(tài)。第三種頁面內(nèi)容切換了但路徑?jīng)]變。這常見于單頁應(yīng)用。有的同學為了方便直接用v-if或display:none切換幾個div的顯示隱藏內(nèi)容確實是換了但地址欄始終是同一個地址。用戶看著是“頁面切過去了”但任何一個外部鏈接都沒法直接定位到當前內(nèi)容刷新后也必然回到默認區(qū)塊壓根談不上狀態(tài)保持。1.2 狀態(tài)丟失的根本原因不管表現(xiàn)是哪種背后只有一個核心原因?qū)Ш礁吡梁蚒RL路徑用的是兩套獨立的邏輯沒有形成綁定關(guān)系。用生活里的例子類比一下。你去圖書館借書管理員記的是“張三借了《三體》”但你手里拿的借書卡上寫的是“張三借了《流浪地球》”。書拿走的時候沒問題第二次來的時候管理員按卡上的記錄去找書結(jié)果找錯了甚至找不到。前端也是一樣樣式狀態(tài)是一張記錄URL地址是另一張記錄兩邊對不上刷新的時候以哪個為準哪個都不可靠。更具體地說瀏覽器本身沒有“記住你上一次點擊了哪個導(dǎo)航按鈕”的功能但它天然會記住當前頁面的URL。所以正確做法是把URL當作唯一的“賬本”每次刷新之后都從地址欄反推當前應(yīng)該高亮的導(dǎo)航項然后重新設(shè)置樣式。這就解決了第一條。至于點擊后路徑?jīng)]變那是事件處理函數(shù)里壓根沒有寫更新URL的代碼屬于邏輯遺漏不是技術(shù)難題。1.3 正確的架構(gòu)思路搞清楚原因之后解決方案其實很清晰建立一個“單向數(shù)據(jù)流”的關(guān)系。URL路徑是唯一數(shù)據(jù)源負責記錄當前處于哪個頁面。點擊導(dǎo)航按鈕時唯一要做的是更新URL路徑。URL變化后通過監(jiān)聽事件或路由機制自動更新導(dǎo)航按鈕的高亮樣式和內(nèi)容區(qū)域。這樣設(shè)計之后不管用戶是點擊按鈕、手動改地址欄、按瀏覽器前進后退還是直接刷新頁面所有入口都會歸到同一條邏輯上根據(jù)當前URL渲染頁面狀態(tài)。高亮問題、路徑不同步問題、刷新后狀態(tài)丟失問題都會一起消失。2. 原生JavaScript可直接落地的完整實現(xiàn)方案2.1 先搭一個基礎(chǔ)的導(dǎo)航結(jié)構(gòu)很多項目沒上框架或者只是簡單的后臺模板頁面這時候用原生JS處理是最直接的。先看HTML結(jié)構(gòu)我建議用無序列表加鏈接的經(jīng)典寫法方便語義化也方便后面的事件綁定。ul classnav-list idnavList li a href/dashboard classnav-link>function setActiveNav(currentPath) { const links document.querySelectorAll(.nav-link); // 先統(tǒng)一移除所有高亮避免出現(xiàn)多個按鈕同時亮起 links.forEach(function(link) { link.classList.remove(active); }); // 根據(jù)當前路徑找到對應(yīng)鏈接添加高亮 links.forEach(function(link) { if (link.getAttribute(data-path) currentPath) { link.classList.add(active); } }); }這段邏輯看起來簡單但這個函數(shù)是整個方案的地基。后面不管哪個入口觸發(fā)了路徑變化最終都是調(diào)它來更新按鈕狀態(tài)所以從一開始就封裝成獨立函數(shù)不要在每個事件里重復(fù)寫class操作。注意一個細節(jié)第二行那個“先全部移除”不能省。如果不先清除舊的高亮當你從“訂單管理”切到“用戶列表”的時候兩個按鈕都會處于高亮狀態(tài)導(dǎo)航欄看起來像故障了一樣。這個問題我最早踩過排查了半天結(jié)果就是漏了這行。點擊事件綁定然后是點擊事件。這一步的關(guān)鍵有兩點一是阻止a標簽的默認跳轉(zhuǎn)行為二是更新URL路徑并調(diào)用渲染函數(shù)。document.getElementById(navList).addEventListener(click, function(e) { const target e.target.closest(.nav-link); if (!target) return; // 阻止默認跳轉(zhuǎn)改成由JS來控制路徑更新 e.preventDefault(); const path target.getAttribute(data-path); // 使用 history.pushState 更新URL不觸發(fā)整頁刷新 history.pushState(null, , path); // 更新高亮按鈕 setActiveNav(path); });這里用到了e.target.closest(.nav-link)好處是你點擊的不一定剛好是a標簽本身可能是里面的文字或者內(nèi)嵌圖標closest會幫我們找到最近的導(dǎo)航鏈接元素避免給每個內(nèi)含元素單獨加事件。history.pushState方法比較關(guān)鍵。它可以在不刷新頁面的情況下改變地址欄的URL也不會觸發(fā)瀏覽器向服務(wù)器發(fā)起新的請求特別適合單頁應(yīng)用。但注意這個方法要求新的URL必須和當前頁面同源這個限制后面我會單獨講。刷新時恢復(fù)高亮最后是初始化。頁面加載完成的時候從地址欄讀取當前的路徑然后反查對應(yīng)導(dǎo)航項并設(shè)置高亮。window.addEventListener(DOMContentLoaded, function() { const currentPath window.location.pathname; setActiveNav(currentPath); });如果地址欄是/order頁面加載完之后自動把“訂單管理”按鈕點亮。這樣不管你從哪個外部鏈接進來還是手動刷新高亮狀態(tài)都能正確恢復(fù)。到這里一個最基礎(chǔ)的導(dǎo)航欄刷新保持方案就完整了。整個邏輯循環(huán)起來點擊→更新URL→更新樣式刷新→讀取URL→更新樣式。兩個入口都歸到同一條鏈路上再也不會出現(xiàn)狀態(tài)丟失的問題。2.3 三種URL更新方式的選型比較上面我用的是history.pushState但實際項目里URL更新有三種常用方式各有用武之地需要區(qū)分場景。更新方式刷新后狀態(tài)保持瀏覽器歷史記錄觸發(fā)頁面刷新適用場景l(fā)ocation.href /path保持會記錄會整頁刷新傳統(tǒng)多頁面項目location.hash #/path保持會記錄不刷新老版單頁應(yīng)用history.pushState保持會記錄不刷新現(xiàn)代SPA、大部分框架項目先說location.href。這種方式最直接頁面直接跳轉(zhuǎn)瀏覽器重新加載新地址。它的優(yōu)點是簡單可靠缺點是每次切換導(dǎo)航都需要重新請求整個頁面體驗相對差一些適合傳統(tǒng)的多頁面網(wǎng)站。再說location.hash。早期單頁應(yīng)用常用地址欄里會出現(xiàn)一個#號比如example.com/#/order。好處是不用刷新頁面而且刷新后hash還在高亮能恢復(fù)。缺點是這個#號在現(xiàn)代項目里看起來不夠美觀而且SEO不友好搜索引擎對hash后面的內(nèi)容收錄能力有限。最后是history.pushState。這是目前框架項目里最主流的方案。它改變地址欄但不會觸發(fā)整頁刷新也不需要#號配合popstate事件還能監(jiān)聽用戶點擊瀏覽器前進后退按鈕。要注意的是生產(chǎn)環(huán)境如果用了history.pushState服務(wù)端必須配置好路徑重寫把所有路由都指向入口HTML文件否則用戶直接訪問/order地址時會報404。這個配置涉及服務(wù)器環(huán)境細節(jié)這里不展開但務(wù)必記住有這一層要求。2.4 手動實現(xiàn)時容易忽略的細節(jié)方案本身不復(fù)雜但我在實際寫代碼過程中踩過不少坑集中說一下。第一個坑pushState的同源限制。window.history.pushState(null, , path)里的path必須是相對路徑或者和當前域名端口完全一致的同源地址。如果你寫了一個http://other-domain.com/path瀏覽器會直接報錯。這個限制是為了安全考慮但也意味著你沒法通過pushState跳轉(zhuǎn)到外部站點。第二個坑>window.addEventListener(popstate, function() { const currentPath window.location.pathname; setActiveNav(currentPath); });這個監(jiān)聽要放在初始化的時候一起綁定。加上之后前進后退按鈕也能正確聯(lián)動高亮算是閉環(huán)了。3. 框架與復(fù)雜場景下的處理方案原生方案搞定之后再來看看我們工作中更常見的框架環(huán)境。Vue、uni-app、iframe嵌套這幾個場景各有各的坑單獨拿出來說。3.1 Vue Router環(huán)境別重復(fù)造輪子在Vue項目里很多人習慣自己寫一個函數(shù)在點擊導(dǎo)航時手動替換class這個思路可以理解但其實是重復(fù)造輪子。Vue Router本身就內(nèi)置了導(dǎo)航高亮的完整方案用得好完全不用自己寫。最簡單的方式是用router-link組件替代原生的a標簽。router-link在路由匹配成功時會自動給對應(yīng)的導(dǎo)航項添加router-link-active類如果設(shè)置了exact屬性會使用更嚴格的router-link-exact-active類。我通常在全局樣式里針對這兩個類設(shè)置不同顏色不需要任何手動邏輯。nav router-link to/dashboard exact數(shù)據(jù)看板/router-link router-link to/order exact訂單管理/router-link router-link to/user exact用戶列表/router-link router-link to/setting exact系統(tǒng)設(shè)置/router-link /nav樣式里寫上.router-link-exact-active { background-color: #409eff; color: #ffffff; }這樣從點擊到刷新再到瀏覽器前進后退高亮全部由Vue Router自己接管天然不會出問題。這也是我做Vue項目最推薦的方式?jīng)]有之一。但有一種情況需要手動處理動態(tài)生成的導(dǎo)航數(shù)據(jù)比如根據(jù)后端返回的菜單權(quán)限渲染導(dǎo)航項。這時候router-link仍然可以用關(guān)鍵在于路由的name字段和to屬性的綁定要對上確保exact匹配不會誤判。遇到過的最典型問題是/dashboard和/dashboard/detail兩個路徑同時存在時不加exact的話訪問詳情頁會讓“數(shù)據(jù)看板”和“詳情頁”兩個按鈕都高亮加上exact之后只匹配完全相同的路徑問題就消失了。另一類需要手動處理的情況是使用vue-router的編程式導(dǎo)航比如某個按鈕不是router-link而是普通的el-button點擊后執(zhí)行this.$router.push(/order)。這時候按鈕沒有自動的active類只能在計算屬性里判斷this.$route.path再動態(tài)綁定class。button :class{ menu-active: $route.path /order } click$router.push(/order) 訂單管理 /button核心思想還是同一個以$route.path為唯一數(shù)據(jù)源樣式由它推導(dǎo)而不是在點擊事件里手動去加類。3.2 uni-app 與小程序自定義導(dǎo)航欄的高亮處理小程序場景下問題又有點不一樣。如果你用的是微信小程序原生的tabBar點擊底部導(dǎo)航時系統(tǒng)會自動切換選中態(tài)這個由框架自己處理基本不用操心。但有一個常見需求是頁面頂部的導(dǎo)航欄按鈕也想要背景色切換這就必須用自定義導(dǎo)航組件了因為原生導(dǎo)航欄的背景色是全局配置的不支持點擊切換。自定義導(dǎo)航欄里按鈕高亮切換的邏輯跟原生網(wǎng)頁類似但有一個關(guān)鍵區(qū)別小程序頁面切換是通過uni.switchTab、uni.navigateTo等API進行的不會刷新整個頁面而是會觸發(fā)目標頁面的onShow生命周期。這就意味著如果你在某個頁面的onLoad里根據(jù)當前路由設(shè)置導(dǎo)航高亮有可能不生效——因為頁面實例可能已經(jīng)存在直接走的是onShow。我的處理習慣是寫一個導(dǎo)航組件在組件的onShow或當前頁面onShow里重新讀取當前頁面路由再設(shè)置按鈕狀態(tài)。小程序里獲取當前頁面路徑可以用getCurrentPages()方法它是小程序框架的原生API返回頁面棧最后一個元素就是當前頁面其route屬性就是路徑。// 頁面onShow里 onShow() { const pages getCurrentPages(); const currentPage pages[pages.length - 1]; const currentPath / currentPage.route; this.setData({ activePath: currentPath }); }如果導(dǎo)航欄是自定義組件的形態(tài)組件內(nèi)部也可以監(jiān)聽當前頁面變化。一種做法是通過組件的pageLifetimes.show生命周期在宿主頁面展示時自動觸發(fā)拿到當前頁面路徑后更新按鈕狀態(tài)。還有一個很容易踩的坑是頁面路徑帶參數(shù)。比如進入詳情頁時路徑是/pages/order/detail?id123但導(dǎo)航欄里對應(yīng)的高亮項是/pages/order/index。如果直接做字符串匹配/pages/order/index和/pages/order/detail根本對不上。這種情況要么對路徑做前置截取處理要么在組件里維護一個“當前導(dǎo)航項對應(yīng)路徑”的映射表把詳情頁歸到訂單管理的導(dǎo)航項下。另外uni-app里如果監(jiān)聽了底部tabBar的點擊事件有時候也會跟自定義頂部導(dǎo)航的狀態(tài)同步產(chǎn)生沖突。我建議的處理方式是底部導(dǎo)航點擊之后統(tǒng)一觸發(fā)一個全局事件或者Vuex/ Pinia的狀態(tài)更新頂部導(dǎo)航監(jiān)聽同一份數(shù)據(jù)源保證上下一致。千萬不要在底部導(dǎo)航和頂部導(dǎo)航里各維護一套當前激活項的狀態(tài)那樣只會平白多出無數(shù)個bug。3.3 iframe嵌套場景父頁面和子頁面如何同步iframe嵌套是真的煩人因為里面涉及兩個獨立的文檔刷新行為也跟普通頁面完全不同。常見情況是父頁面左側(cè)是導(dǎo)航菜單右側(cè)是iframe點擊菜單切換iframe的src。問題在于如果你單獨刷新iframe子頁面父頁面的導(dǎo)航高亮是不會跟著變的因為父頁面壓根沒重新加載也沒有收到子頁面?zhèn)鬟f的任何信息。你要是刷新整個父頁面iframe會重新加載默認地址導(dǎo)航是恢復(fù)高亮了但內(nèi)容又回到了最初的頁面用戶之前看的那個頁面變成了“丟了”的狀態(tài)。針對這種情況我的方案分成兩部分。第一父頁面導(dǎo)航高亮的來源還是要綁定到當前的iframe地址可以用一個全局變量或者父頁面的hash來記錄點擊導(dǎo)航時同時更新這兩者。第二子頁面加載完成后主動向父頁面報告自己的路徑父頁面收到之后設(shè)置對應(yīng)導(dǎo)航高亮。具體實現(xiàn)時在子頁面里用window.parent.postMessage傳遞信息// 子頁面 window.addEventListener(load, function() { const currentPath window.location.pathname; window.parent.postMessage({ type: page-loaded, path: currentPath }, *); });父頁面對應(yīng)監(jiān)聽消息// 父頁面 window.addEventListener(message, function(event) { if (event.data event.data.type page-loaded) { setActiveNav(event.data.path); } });需要注意postMessage的第二個參數(shù)指定目標窗口的源在生產(chǎn)環(huán)境里建議換成具體的域名不要用通配符*避免安全隱患。這個細節(jié)很多新手會忽略但涉及跨域通信時非常重要。另外如果iframe子頁面里也有獨立的導(dǎo)航并且點擊時要同步父頁面的導(dǎo)航高亮邏輯也是一樣的子頁面點擊后向父頁面發(fā)一條postMessage父頁面更新自己的導(dǎo)航狀態(tài)?？傊趇frame場景里通信協(xié)議就是postMessage狀態(tài)來源就是子頁面當前的URL照著這個思路走基本不會亂。4. 常見故障排查清單與實操經(jīng)驗4.1 刷新后狀態(tài)完全丟失如果你的導(dǎo)航欄刷新后完全回到默認高亮連路徑恢復(fù)都沒做到那多半是初始化回讀的邏輯壓根沒寫上或者寫錯了地方。先從三個點排查第一檢查初始化函數(shù)是否在DOMContentLoaded事件里執(zhí)行。如果腳本放在head里而且沒有加defer執(zhí)行時DOM結(jié)構(gòu)還不存在querySelectorAll拿到的是空列表高亮自然設(shè)置不上。第二檢查讀取路徑的方式。window.location.pathname、window.location.hash、window.location.href三個值在帶hash路由的SPA里差異很大先打印到控制臺看一眼實際值是什么再決定怎么匹配。第三檢查數(shù)據(jù)路徑和實際路徑是否匹配。比如導(dǎo)航>