JavaScript 中 window.location 对象详解与实战
引言
在 Web 开发里，window.location 是个绕不开的对象。它代表了浏览器窗口当前的 URL 信息，不仅能让我们读取地址栏里的细节，还能直接操控页面的跳转行为。无论是做单页应用的路由，还是简单的页面重定向，理解这个对象都是基本功。
对象概览
window.location 返回的是一个 Location 对象实例，包含了当前文档的完整 URL 分解信息。通过这个对象，我们可以轻松获取协议、主机名、端口、路径以及查询参数等数据。
常用属性
下面这些属性能帮你快速解析当前地址：
- href: 完整的 URL 字符串，比如
https://example.com/path?a=1。 - protocol: 协议部分，通常是
http:或https:。 - host: 主机名加端口，例如
example.com:8080。 - hostname: 纯域名，不带端口。
- port: 端口号，如果未指定则为空字符串。
- pathname: 路径部分，如
/path/to/page。 - search: 查询字符串，包含问号，如
?key=value。 - hash: 锚点部分，以
#开头，如#section1。
核心方法
除了读取，我们更常需要修改 URL 来驱动页面变化。window.location 提供了三个主要方法来控制导航：
1. assign(url) 这是最常用的跳转方式。它会加载新的文档，并在浏览历史记录中留下记录。用户点击'后退'按钮可以回到上一页。
// 跳转到新页面
window.location.assign('https://www.example.com');
2. replace(url) 如果你不希望用户在历史中保留当前页面，可以用这个方法。它替换当前文档，不会创建新的历史记录条目。常用于登录成功后跳转到首页，避免用户回退到登录页看到敏感信息。
// 替换当前页面
window.location.replace('/dashboard');
3. reload() 重新加载当前页面。默认会刷新缓存，但也可以强制从服务器获取最新资源。
// 强制刷新
window.location.reload(true);
