element.classList.add 单独使用无法实现互斥高亮，因只添加不移除；需先批量清除所有 active 再为目标添加，或手动维护当前激活项并切换时移除旧类。
为什么 element.classList.add 单独用无法实现“切换”高亮
直接调用 element.classList.add('active') 只会不断叠加 class，不会移除旧的。导航栏通常要求「有且仅有一个」项高亮，否则多个 active 同时存在，样式错乱或逻辑失效。
常见错误现象：点击多个菜单后，所有项都带 。active 类，CSS 高亮堆叠，路由跳转后状态未同步
关键点在于：添加新高亮前，必须先清理旧高亮——但 DOM 不知道哪个是“旧”的，得靠你维护上下文。
- 要么手动记录上一个激活的元素（比如存为
let currentActive = null），每次切换时先currentActive?.classList.remove('active') - 要么批量清除所有候选元素的
active，再给目标加——适合静态导航结构 - 不要依赖
element.classList.toggle自动切换，它不解决“互斥”问题，只是单元素开关
如何安全地批量清除再添加（推荐用于固定导航 DOM）
假设导航 HTML 是一组 或 ，有统一父容器和可识别的选择器：
const navItems = document.querySelectorAll('.nav-menu a');
const targetItem = document.querySelector(`.nav-menu a[href="${location.pathname}"]`);
// 先清空所有 active
navItems.forEach(item => item.classList.remove('active'));
// 再给目标加
if (targetItem) {
targetItem.classList.add('active');
}
注意：querySelector 匹配要严谨。比如 href="/user" 和当前 location.pathname === '/user/' 可能不等价，建议统一处理末尾斜杠或用 startsWith 判断。
- 性能无压力：现代浏览器对
classList.remove批量调用很高效，不用节流或防抖 - 兼容性好：
classList在 IE10+ 均支持；如需兼容 IE9，得回退到className字符串操作 - 避免漏掉动态插入的导航项：如果导航是 JS 渲染的（如 Vue/React 组件），这段逻辑得放在渲染完成之后执行，或监听 DOM 变化
如何配合路由变化自动更新（SPA 场景下容易踩坑）
在 Vue Router 或 React Router 中，location.pathname 不会自然触发重排，所以不能只靠页面加载时执行一次。
典型错误：只在 DOMContentLoaded 里跑一遍，后续点击路由 Link 后，DOM 的 active 状态不再更新。
- Vue 用户：监听
$route变化，在watch: { '$route'() { updateActiveClass() } }里调用 - React 用户：用
useEffect监听location.pathname，配合useLocationHook - 原生 JS SPA：监听
popstate事件，再手动调用更新函数——但要注意pushState不触发该事件，得封装自己的goTo()方法统一处理
别忘了：路由参数变化（如 /post/123 → /post/456）可能让 href 匹配失败，此时更适合用数据驱动，比如给每个导航项加 data-path="/post/:id"，再用正则匹配。
为什么不用 element.className = 'active' 替代
直接赋值 element.className 会覆盖所有已有 class，比如原先是 class="nav-link is-external"，赋值后只剩 class="active"，丢失语义和样式依赖。
classList.add/remove 是原子操作，不影响其他 class，这是它不可替代的核心价值。
容易被忽略的一点：有些组件库（如 Element Plus）的导航组件内部已接管 active 状态，强行用原生 classList 操作可能被下一次 re-render 覆盖。这种情况下，应优先使用框架提供的 API（如 el-menu 的 default-active 属性）而非绕过控制。
