Metrical Dashboard侧边栏JS自动激活：基于URL匹配实现

你使用Metrical Dashboard时，想要页面加载后自动给当前URL对应的侧边栏链接加上active类，但现有代码没达到预期效果，你的代码如下：

var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
const currentLink = [...allLinks].filter(e => {
  return e.href == url;
});

if (currentLink.length > 0) { 
    currentLink[0].classList.add("active");
}

问题原因 #

1. 类型不匹配：window.location是一个Location对象，而e.href是字符串格式的完整URL，直接用==比较会因类型不一致导致匹配失败。
2. URL匹配精度问题：如果页面URL带有参数、锚点或末尾斜杠不一致，全量字符串匹配也容易出错。

修正方案 #

方案1：严格匹配完整URL

把window.location换成window.location.href（字符串格式的完整URL），用严格相等匹配：

document.addEventListener('DOMContentLoaded', () => {
  const currentUrl = window.location.href;
  const allLinks = document.querySelectorAll('.nav-item a');
  const currentLink = [...allLinks].find(e => e.href === currentUrl);

  if (currentLink) {
    currentLink.classList.add("active");
  }
});

方案2：只匹配路径部分（忽略参数/锚点）

如果你的页面URL带参数（比如/dashboard?id=1），但只想匹配路径部分，用pathname比较：

document.addEventListener('DOMContentLoaded', () => {
  const currentPath = window.location.pathname;
  const allLinks = document.querySelectorAll('.nav-item a');
  const currentLink = [...allLinks].find(e => {
    const linkPath = new URL(e.href).pathname;
    return linkPath === currentPath;
  });

  if (currentLink) {
    currentLink.classList.add("active");
  }
});

方案3：支持嵌套路由的部分匹配

如果是嵌套路由场景（比如当前URL是/dashboard/settings，想激活父路由/dashboard的链接），可以用路径前缀匹配：

document.addEventListener('DOMContentLoaded', () => {
  const currentPath = window.location.pathname;
  const allLinks = document.querySelectorAll('.nav-item a');
  const currentLink = [...allLinks].find(e => {
    const linkPath = new URL(e.href).pathname;
    // 排除根路由避免误匹配所有链接
    return currentPath.startsWith(linkPath) && linkPath !== '/';
  });

  if (currentLink) {
    currentLink.classList.add("active");
  }
});

额外注意事项 #

• 一定要把代码放在DOMContentLoaded事件监听里，确保DOM加载完成后再查找元素，避免因为元素还未渲染导致获取不到.nav-item a。
• 如果侧边栏链接用的是相对路径（比如href="./dashboard"），用new URL(e.href, window.location.origin)解析成完整路径后再比较，兼容性更好。

内容的提问来源于stack exchange，提问作者idk1943