history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态(state)。
语法
history.pushState(state, title[, url])
参数
state
状态对象是一个 JavaScript 对象,它与pushState()创建的新历史记录条目相关联。每当用户导航到新状态时,都会触发popstate事件,并且该事件的状态属性包含历史记录条目的状态对象的副本。 状态对象可以是任何可以序列化的对象。因为 Firefox 将状态对象保存到用户的磁盘上,以便用户重新启动浏览器后可以将其还原,所以我们对状态对象的序列化表示施加了 2MiB 的大小限制。如果将序列化表示形式大于此状态的状态对象传递给pushState(),则该方法将引发异常。如果您需要更多空间,建议您使用 sessionStorage或者localStorage。
title
当前大多数浏览器都忽略此参数,尽管将来可能会使用它。在此处传递空字符串应该可以防止将来对方法的更改。或者,您可以为要移动的状态传递简短的标题。
url 可选
新历史记录条目的 URL 由此参数指定。请注意,浏览器不会在调用 pushState() 之后尝试加载此 URL,但可能会稍后尝试加载 URL,例如在用户重新启动浏览器之后。新的 URL 不必是绝对的。如果是相对的,则相对于当前 URL 进行解析。新网址必须与当前网址相同 origin;否则,pushState()将引发异常。如果未指定此参数,则将其设置为文档的当前 URL。
window.history.pushState("", "", "../powerprojects") //可以定位修改到当前页面的上一层路由
// 官方例子
const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'
history.pushState(state, title, url)