Location

[TOC]

索引

属性：

href：https://example.com:8080/path?q=1#hash，获取或设置完整的 URL。修改会触发页面跳转。
protocol：https:，URL 的协议（含 :）。修改可能触发跳转。
hostname：example.com，域名部分。修改会跳转到新域名。
port：8080，端口号（字符串形式）。若无则为空。修改会跳转到新端口。
host：example.com:8080，域名 + 端口（若端口非默认）。修改会跳转。
pathname：/path/，路径部分（以 / 开头）。修改会跳转到新路径。
search：?q=1，查询字符串（含 ?）。修改会重新加载页面。
hash：#hash，哈希部分（含 #），用于页面锚点。修改不会重载页面，但会记录历史。
origin：https://example.com:8080，只读，协议 + 域名 + 端口。

方法：

location.assign()：(url)，用于导航到新 URL 的核心方法，它会将新页面添加到浏览历史中（用户可通过“后退”按钮返回）。
location.replace()：(url)，用于导航到新 URL 的方法，不会在浏览历史中新增记录，而是直接替换当前页面的历史条目（用户无法通过“后退”按钮返回原页面）。
location.reload()：(forceRefresh?)，用于重新加载当前页面，支持从缓存或服务器强制获取最新内容。

Location

属性

href：https://example.com:8080/path?q=1#hash，获取或设置完整的 URL。修改会触发页面跳转。
protocol：https:，URL 的协议（含 :）。修改可能触发跳转。
hostname：example.com，域名部分。修改会跳转到新域名。
port：8080，端口号（字符串形式）。若无则为空。修改会跳转到新端口。
host：example.com:8080，域名 + 端口（若端口非默认）。修改会跳转。
pathname：/path/，路径部分（以 / 开头）。修改会跳转到新路径。
search：?q=1，查询字符串（含 ?）。修改会重新加载页面。
hash：#hash，哈希部分（含 #），用于页面锚点。修改不会重载页面，但会记录历史。
origin：https://example.com:8080，只读，协议 + 域名 + 端口。

方法

assign()

location.assign()：(url)，用于导航到新 URL 的核心方法，它会将新页面添加到浏览历史中（用户可通过“后退”按钮返回）。

url：string，要加载的新 URL。可以是绝对路径（完整 URL）或相对路径（相对于当前页面的路径）。
特性：
1. 后续逻辑：
  - 调用 location.assign() 后，后续代码可能不会执行（因页面已开始卸载）。
  - 若需在跳转前执行逻辑，可监听 beforeunload 事件。
2. 替代方法：
  - location.href = url：和 assign() 完全等价，但 assign() 更显式地表明意图。
  - location.replace(url)：替换当前历史记录，用户无法返回原页面。
  - location.reload()：重新加载当前页面。
  - history.pushState()：在 SPA 中实现无刷新导航。

示例：

基本使用：

// 跳转到指定 URL，保留历史记录
location.assign("https://www.example.com/new-page");

// 跳转到当前域名的 /about 路径
location.assign("/about");

// 跳转到当前路径的上一级目录中的 contact 页面
location.assign("../contact");

错误处理：

try {
  location.assign("invalid-url"); // 无效 URL 会抛出错误
} catch (error) {
  console.error("导航失败:", error);
}

replace()

location.replace()：(url)，用于导航到新 URL 的方法，不会在浏览历史中新增记录，而是直接替换当前页面的历史条目（用户无法通过“后退”按钮返回原页面）。

url：string，要加载的新 URL。可以是绝对路径（完整 URL）或相对路径（相对于当前页面的路径）。
特性：
1. 等价于 assign() 的特性
2. 适用场景：适用于需隐藏导航历史的场景，如登录后跳转、支付完成页等。

示例：

基本使用：

// 跳转到新 URL，且无法通过“后退”返回原页面
location.replace("https://www.example.com/new-page");

// 替换为当前域名的 /dashboard 路径
location.replace("/dashboard");

错误处理：

try {
  location.replace("invalid-url"); // 无效 URL 会抛出错误
} catch (error) {
  console.error("替换失败:", error);
}

reload()

location.reload()：(forceRefresh?)，用于重新加载当前页面，支持从缓存或服务器强制获取最新内容。

forceRefresh?：boolean，默认：false，是否强制从服务器重新加载（绕过浏览器缓存）。
特性：
1. 等价于 assign() 的特性
2. 缓存控制：即使 forceRefresh 为 false，浏览器也可能根据 HTTP 头（如 Cache-Control: no-cache）决定是否从服务器加载。

示例：

普通重新加载（可能使用缓存）：

// 重新加载页面，允许浏览器使用缓存
location.reload();
// 等效于直接调用（不传参数）
location.reload(false);

强制从服务器重新加载：

// 强制绕过缓存，从服务器获取最新内容
location.reload(true);

结合用户操作使用：

// 点击按钮时强制刷新页面
document.getElementById("refreshButton").addEventListener("click", () => {
  location.reload(true);
});

Location ​

索引 ​

Location ​

属性 ​

方法 ​

assign() ​

replace() ​

reload() ​

Location

索引

Location

属性

方法

assign()

replace()

reload()