Location

Location 对象表示当前页面的地址信息。它既能读取当前 URL 的组成部分，也能触发页面跳转、刷新和 hash 变更。

location 是什么

在浏览器中，window.location 指向当前文档对应的 Location 对象：

window.location
location

它既像一个“地址信息对象”，也像一个“导航入口”。

常用属性

完整地址

console.log(location.href)

href 是当前页面的完整 URL，也可以直接赋值触发跳转：

location.href = '/login'

协议、主机与端口

console.log(location.origin)
console.log(location.protocol)
console.log(location.host)
console.log(location.hostname)
console.log(location.port)

区别是：

• origin：协议 + 主机 + 端口
• host：主机 + 端口
• hostname：只有主机名

路径、查询和 hash

console.log(location.pathname)
console.log(location.search)
console.log(location.hash)

• pathname：路径部分，例如 /docs/intro
• search：查询字符串，例如 ?page=2
• hash：锚点部分，例如 #usage

常用方法

reload()

重新加载当前页面：

location.reload()

assign(url)

跳转到新的地址，并保留当前页在历史记录中，用户可以后退回来：

location.assign('/account')

replace(url)

跳转到新的地址，但替换当前历史记录，用户通常不能通过后退回到当前页：

location.replace('/login')

它适合登录态失效后的重定向、支付完成后的结果页跳转等不希望返回到当前状态的场景。

修改地址的常见方式

直接赋值

location.href = 'https://example.com'
location.hash = '#intro'

直接修改 href 会触发导航；只改 hash 通常不会整页刷新，而是更新锚点状态。

从当前地址读取查询参数

如果只是想读取参数，更适合结合 URL 或 URLSearchParams：

const url = new URL(location.href)

console.log(url.searchParams.get('page'))
console.log(new URLSearchParams(location.search).get('page'))

Location 和 URL 的区别

两者都能处理地址，但职责不同：

• Location 代表“当前页面地址”，并带有导航能力
• URL 更像一个通用的地址解析与拼接工具

例如：

const current = location.href
const apiUrl = new URL('/api/user', location.origin)

如果只是解析和修改字符串形式的 URL，优先使用 /web/core/web-api/window/url 中介绍的 URL API；如果要真正驱动页面跳转，使用 location。

常见场景

判断当前页面路径

if (location.pathname.startsWith('/admin')) {
  console.log('admin page')
}

读取查询参数

const query = new URLSearchParams(location.search)
const keyword = query.get('keyword')

修改 hash

location.hash = 'usage'

这通常用于锚点导航、目录高亮或轻量页面状态同步。

使用建议

• 想读取当前地址信息时，用 location。
• 想解析、拼接、读写参数时，更适合 URL 和 URLSearchParams。
• 想保留返回路径时，用 assign() 或直接改 href。
• 不希望当前页留在历史栈里时，用 replace()。

参考资料

• MDN Location