导航栏激活链接颜色修改：双路径映射时根路径无法匹配激活样式如何解决

现有JS的匹配逻辑是当前路径前缀等于导航链接的href才会加激活类。当访问路径为/时，导航链接的href是/start，/的长度远小于/start，取前缀匹配的结果不相等，因此无法触发激活样式。

不需要新增两个导航链接，该方案会导致界面出现重复入口，用户体验极差，不建议采用。优先选择以下两种方案：

方案1：修改JS匹配逻辑（无页面跳转，改造成本最低） #

在匹配前先对根路径做特殊处理，把/和/start都匹配到START导航项，修改后的代码如下：

function markActiveMenuItem() {
  var path = window.location.pathname;
  if (path != "/building" && !path.startsWith("/watch")) {
    // 新增根路径特殊匹配逻辑
    if (path === '/') {
      $('.nav-link[href="/start"]').addClass("active");
    } else {
      // 原有逻辑完全保留
      $(".nav-link").each(function () {
        var href = $(this).attr("href");
        if (path.substring(0, href.length) === href) {
          $(this).addClass("active");
        }
      });
      $(".dropdown-item").each(function () {
        var href = $(this).attr("href");
        if (path.substring(0, href.length) === href) {
          $(this).closest(".nav-item").children("a").addClass("active");
        }
      });
    }
  }
}

方案2：配置根路径重定向（更规范，对SEO友好） #

不需要修改前端代码，直接在后端把/的请求重定向到/start，既保证同一页面只有一个URL，也能让原来的JS逻辑正常生效。修改后端代码如下：

// 新增根路径重定向接口
@GetMapping("/")
public String rootRedirect() {
    return "redirect:/start";
}

// 原有接口仅保留/start路径映射
@GetMapping("/start")
public String home(Model model) {
    return "templates/home";
}

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