3. location 对象与页面跳转

location 就是地址栏对象，能拿当前 URL，也能跳转页面。

核心五个：
① location.href——完整 URL，赋值就跳转
② location.host——域名+端口
③ location.pathname——路径
④ location.search——? 后面的参数
⑤ location.reload()——刷新

坑：location.href = "url" 会产生历史记录、location.replace() 不产生、reload(true) 强制刷新。

3.1 互动演示（当前 URL 拆分 + 跳转方式对比）

3.2 知识点讲解

① 先看一个完整 URL 长什么样

拿这个地址举例：https://www.example.com:8080/page/index.html?id=10

// 网址开头的协议，比如 "https:"
window.location.protocol;

// 是谁家的网站，比如 "www.example.com"
window.location.hostname;

// 页面放在哪个路径下，比如 "/page/index.html"
window.location.pathname;

// 门牌号，比如 "8080"；没写就是默认
window.location.port;

// 整条完整网址，能读也能改（改了就跳走）
window.location.href;

// 问号后面那一截，比如 "?id=10"
window.location.search;

search 一定以 ? 开头；没有参数时 search 是空字符串 ""。拿参数就用 search + 下一讲的 URLSearchParams。

② 两种页面跳转方式（区别是重点）

// 写法一：直接给 href 赋值，浏览器就跳过去
// 特点：跳完后历史里多记一笔（按后退能回来）
window.location.href = "https://www.baidu.com";

// 用在哪：普通跳转（列表→详情、下一题……）

// 写法二：replace，把当前页从历史里涂掉
// 特点：跳完后历史里没这笔（按后退回不来）
window.location.replace("https://www.baidu.com");

// 用在哪：登录成功跳首页（防止点后退又退回登录页）

可以这样记：href 是"新记一笔账"（可后退）；replace 是"把这一页涂掉"（不可后退）。

③ 跳转时怎么带参数（预告）

// 在网址后面拼 ?名字=值，就能把小数据带给下一页
// 下一页怎么收：先用 location.search 把 ? 后面的整段取出来
window.location.href = "04-url-params.html?name=张三&age=18";

// 再丢给 URLSearchParams 拆成 key=value（下一页细讲）

本页重点