3. location 对象与页面跳转

location 是"当前页面的地址簿"：当前 URL 的协议、域名、路径、参数全都能查，还能直接改地址实现跳转。记住两条：location.href 跳转后可后退；location.replace 跳转后不能后退。

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

点按钮查看当前地址的每个部分；跳转按钮会真的离开本页，回来后体会后退键的差别。

3.2 知识点讲解

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

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

部分	例子	说明
protocol 协议	https:	http / https
hostname 域名	www.example.com	网站是谁家的
port 端口	:8080	网站服务的"门牌号"
pathname 路径	/page/index.html	页面放在哪
search 参数	?id=10	? 开头的查询参数
href 完整地址	整串	读写通用

window.location.protocol; // 网址开头的协议，比如 "https:"
window.location.hostname; // 是谁家的网站，比如 "www.example.com"
window.location.pathname; // 页面放在哪个路径下，比如 "/page/index.html"
window.location.port; // 门牌号，比如 "8080"；没写就是默认
window.location.href; // 整条完整网址，能读也能改（改了就跳走）
window.location.search; // 问号后面那一截，比如 "?id=10"

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

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

// 写法一：直接给 href 赋值，浏览器就跳过去
window.location.href = "https://www.baidu.com";
// 特点：跳完后历史里"多记了一笔"，按后退键能回来
// 用在哪：普通跳转（列表→详情、下一题……）

// 写法二：replace，把当前页从历史里涂掉
window.location.replace("https://www.baidu.com");
// 特点：跳完后历史里没有这一页，按后退回不来
// 用在哪：登录成功跳首页（防止点后退又退回登录页）

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

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

// 在网址后面拼 ?名字=值，就能把小数据带给下一页
window.location.href = "04-url-params.html?name=张三&amp;age=18";

// 下一页怎么收：先用 location.search 把 ? 后面这串拿下来
// 再丢给 URLSearchParams 拆成 key=value（下一页细讲）

一句话记住：location 是当前地址簿：protocol/hostname/pathname/search 拆地址；href 跳转可后退、replace 跳转不可后退。