不刷新页面,更改页面的url地址（ history.pushState）

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)