单页应用锚点未基于window.location生成正确URL的问题求助

问题描述 #

当前页面地址：https://example.com/packages/get
锚点代码：

<a href="#later-in-the-page">go to later in the page</a>

浏览器悬停显示的链接为 https://example.com/#later-in-the-page（预期应为 https://example.com/packages/get/#later-in-the-page），点击锚点会跳转到网站首页，而非页面内目标位置。

尝试设置<base>标签为/packages/get后锚点显示恢复正常，但存在以下疑问：

• 认为无需此操作
• 不清楚为何不推荐使用<base>标签
• 实际配置有难度

核心原因 #

浏览器解析锚点时，若当前URL路径末尾没有/，会将#xxx解析为根路径的锚点。因为/packages/get被浏览器识别为文件路径而非目录路径，所以锚点会直接拼接到域名后，而非当前路径末尾。

解决方法 #

方法1：修正页面URL格式 #

确保页面访问地址末尾带有/，即访问 https://example.com/packages/get/（注意最后的斜杠）。此时浏览器会将当前路径识别为目录，锚点会自动拼接为预期的路径。

方法2：修改锚点为绝对/相对路径 #

直接指定完整路径+锚点：

<a href="/packages/get/#later-in-the-page">go to later in the page</a>

或使用相对路径（适合页面结构固定的场景）：

<a href="./#later-in-the-page">go to later in the page</a>

方法3：JavaScript动态修正锚点 #

如果无法修改URL或静态锚点代码，可通过JS批量处理所有锚点：

document.addEventListener('DOMContentLoaded', () => {
  const anchors = document.querySelectorAll('a[href^="#"]');
  const currentPath = window.location.pathname;
  const basePath = currentPath.endsWith('/') ? currentPath : `${currentPath}/`;
  
  anchors.forEach(anchor => {
    const hash = anchor.getAttribute('href');
    anchor.setAttribute('href', basePath + hash);
  });
});

这段代码会在页面加载后，将所有以#开头的锚点href修正为当前路径+锚点的形式。

关于<base>标签的疑问解答 #

1. 为何不推荐使用？
   • <base>标签会全局影响页面所有相对路径的解析（包括图片、脚本、样式表），若页面存在其他相对路径资源，会导致加载错误，需统一调整所有路径，维护成本高。
   • 单页应用的前端路由逻辑可能与<base>标签的路径解析规则冲突，引发更多跳转异常。
2. 为何无需依赖它？
   通过调整URL格式或锚点写法即可适配浏览器的默认路径解析规则，不需要引入全局的<base>标签增加复杂度。

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