JS-深度拆解 URL 结构与相对路径转换逻辑

前言

无论是前端请求数据，还是后端路由配置，URL (Uniform Resource Locator) 都是我们最常打交道的东西。它不仅是一个地址，更是一套告诉浏览器“如何定位并获取资源”的精密指令。

一、 URL 的六大核心组成部分

一个完整的 URL 就像是一封快递的收货地址，每一部分都有其特定的含义。

1. 协议部分 (Protocol)

• 作用：规定通信规则。
• 常见：http:// (明文) 或 https:// (加密)。

2. 主机部分 (Host)

• 作用：定位资源所在的服务器。
• 形式：域名（如 www.juejin.cn）或 IP 地址（如 127.0.0.1）。

3. 端口部分 (Port)

• 作用：指定服务器上的具体服务入口。
• 默认值：HTTP 默认为 80，HTTPS 默认为 443。如果使用默认端口，通常可以省略。

4. 路径部分 (Path)

• 作用：资源在服务器内部的逻辑位置。
• 例子：/user/profile/index.html。

5. 查询部分 (Query)

• 作用：传递给服务器的额外参数。
• 格式：以 ? 开头，键值对之间用 & 连接。如 ?id=123&type=post。

6. 片段部分 (Fragment/Hash)

• 作用：定位页面内的特定位置（锚点）。
• 特点：以 # 开始。注意：片段部分不会被发送到服务器。

---

二、 相对 URL：如何正确“寻找”路径？

在开发中，为了提高代码的可移植性，我们经常使用相对 URL。它分为“路径相对”和“根相对”。

1. 路径相对 URL (Path-Relative)

• 逻辑：以当前页面所在的位置为参考点。

• 语法：

  • ./ 代表当前目录（可省略）。
  • ../ 代表上一级目录。

2. 根相对 URL (Root-Relative)

• 逻辑：以当前站点（域名）的根目录为参考点。
• 语法：以斜杠 / 开头。

---

三、 实战演练：路径转换逻辑

假设当前页面 URL 为：https://example.com/path/to/page.html

场景一：使用路径相对 URL ../images/pic.jpg

1. 当前在 /path/to/。
2. ../ 回退到上一级 /path/。
3. 最终解析：https://example.com/path/images/pic.jpg

场景二：使用根相对 URL /styles/main.css

1. 直接跳过当前路径，定位到根域名。
2. 最终解析：https://example.com/styles/main.css

---

四、 总结：避坑指南

1. 协议缺失：如果使用 //example.com（无协议 URL），浏览器会根据当前页面的协议（HTTP 或 HTTPS）自动补全。

2. 斜杠的魔力：

   • 以 / 开头是找“根目录”。
   • 不以 / 开头是找“当前隔壁”。

3. 哈希 (Fragment) ：改变 URL 中的 # 后缀不会刷新页面，这是单页面应用（SPA）前端路由实现的重要基础。