实现步骤:
- 每次Ajax请求之后都使用history.pushState(replaceState)将携带参数的记录压入历史记录栈(Ajax请求不刷新页面,也不会自动加入到history)
- 通过监听window的onPopstate事件,在下次用户进行前进、后退操作时根据state中我们放置的参数做相应的处理以达到跳转的目的
// Demo
Service.getData()
.then(result => {
// 此处修改页面数据
history.pushState({
pageId: this.currentPage
}, '')
})
window.addEventListener('popstate', event => {
if(!_.isUndefined(event.state.pageId)) {
// 做相应修改页面操作
}
})
欢迎关注、点赞