window.history.pushState
时间: 2024-01-11 22:08:09 浏览: 162
vue-router-h5-history:vue-router的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
`window.history.pushState()` 是 HTML5 提供的一种可以在不刷新页面的情况下更改浏览器历史记录的方法。它可以向浏览器历史记录栈中添加一个新的状态,并且在不刷新页面的情况下将 URL 地址修改为指定的地址。这种方式可以实现单页面应用程序的路由功能。
使用 `pushState()` 方法后,浏览器的地址栏会显示新的 URL 地址,但实际上页面并没有刷新,页面的内容也不会发生变化。这种方式可以让用户感觉自己在访问不同的页面,但实际上他们都是在同一个页面中进行操作的。同时,这种方式还可以保持页面的状态,比如表单数据、滚动位置等。
需要注意的是,通过 `pushState()` 方法添加的新状态不会触发页面的刷新,因此需要使用 `popstate` 事件来监听浏览器历史记录的变化。当用户点击浏览器的前进或后退按钮时,该事件会被触发,可以在事件处理函数中获取到当前的历史记录状态信息,并根据状态信息来更新页面的内容。
阅读全文