location 是 BOM 中 window 的核心属性，提供 URL 信息与操作能力，支持跳转（href/assign/replace）、刷新（reload）、参数解析（search/URLSearchParams）及无刷新修改（pushState/replaceState）。

location 是 BOM（Browser Object Model）中 window 对象的核心属性之一，它提供了当前页面 URL 的信息和操作能力。通过它不仅能获取地址栏内容，还能主动跳转、刷新、修改 URL 参数，是前端路由控制和页面导航的基础工具。

用 location.href 实现页面跳转

最常用也最直接的方式是给 location.href 赋新值：

• 跳转到绝对 URL：location.href = "https://example.com"
• 跳转到相对路径：location.href = "/dashboard"（会拼接到当前域名下）
• 跳转并保留历史记录（用户可点后退）：location.assign("about.html")
• 替换当前历史记录（无法后退）：location.replace("login.html")
• 强制刷新当前页：location.reload()，加 true 表示从服务器重新加载

读取和解析 URL 中的参数（query string）

location.search 返回问号后的查询字符串，如 ?id=123&name=alice。手动解析可用 URLSearchParams（现代推荐）或正则/字符串分割：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• 使用 URLSearchParams（兼容性好，Chrome 49+、Firefox 44+、Edge 17+、Safari 10.1+）：
  

  const params = new URLSearchParams(location.search);<br>
      const id = params.get("id"); // "123"<br>
      const name = params.get("name"); // "alice"<br>
      const allNames = params.getAll("tag"); // 处理重复键

• 兼容老浏览器可封装简单解析函数：
  

  function getQueryParams() {<br>
          const search = location.search.substring(1);<br>
          return search.split("&").reduce((acc, pair) => {<br>
            const [k, v] = pair.split("=");<br>
            if (k) acc[decodeURIComponent(k)] = decodeURIComponent(v || "");<br>
            return acc;<br>
          }, {});<br>
      }<br>
      const { id, name } = getQueryParams();

修改 URL 参数而不刷新页面（单页应用常用）

借助 history.pushState() 或 history.replaceState() 配合 location.origin + location.pathname 构造新 URL：

立即学习“Java免费学习笔记（深入）”；

• 添加/更新参数后跳转（不刷新）：
  

  const url = new URL(location.href);<br>
      url.searchParams.set("tab", "settings");<br>
      history.pushState({}, "", url);

• 仅更新参数，不改变页面状态：
  

  url.searchParams.delete("temp");<br>
      history.replaceState({}, "", url);

• 注意：pushState/replaceState 不触发页面加载，但需自行处理视图更新（如 React Router、Vue Router 底层就基于此）

location 其他实用属性一览

快速了解当前 URL 结构，便于条件判断或日志记录：

• location.protocol → "https:"
• location.host → "example.com:8080"
• location.hostname → "example.com"
• location.port → "8080"（空字符串表示默认端口）
• location.pathname → "/user/profile"
• location.hash → "#section2"（可用于锚点或前端路由）