Angular中设置<base href="/">时同页哈希ID导航失效问题

当页面全局配置了<base href="/">后，子页面（比如localhost:4200/nextPage）里使用<a href="#someID">这类锚点链接时，浏览器会基于<base>指定的根路径解析URL，最终跳转到localhost:4200/#someID，而非预期的当前子页面锚点。这是<base>标签的默认行为——它会统一所有相对URL的基准路径。

下面是几种可行的解决办法：

• 使用带当前页面路径的绝对锚点
  直接在href中写全当前页面路径加锚点，比如：

  <a href="/nextPage#someID">Go to some Id</a>
  

  缺点是页面路径变更时需要手动修改链接，不够灵活。

• 用JavaScript动态处理锚点跳转
  通过阻止默认跳转行为，手动设置当前页面的hash值，适配任意页面路径：
  单个锚点的写法：

  <a href="#someID" onclick="event.preventDefault(); window.location.hash = 'someID';">Go to some Id</a>
  

  通用批量处理（所有以#开头的锚点都生效）：

  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href').slice(1);
        window.location.hash = targetId;
      });
    });
  });
  

  这种方法无需硬编码页面路径，适配性更强。

• 框架环境下用专属指令（如Angular）
  如果是Angular项目（从端口4200推测），可以用框架自带的路由指令来处理锚点：

  <a [routerLink]="['/nextPage']" fragment="someID">Go to some Id</a>
  

  框架会自动结合当前路由生成正确的锚点URL。

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