history实现页面支持Ajax前进、后退

实现步骤：

1. 每次Ajax请求之后都使用history.pushState(replaceState)将携带参数的记录压入历史记录栈（Ajax请求不刷新页面，也不会自动加入到history）
2. 通过监听window的onPopstate事件，在下次用户进行前进、后退操作时根据state中我们放置的参数做相应的处理以达到跳转的目的

// Demo

Service.getData()
.then(result => {
    // 此处修改页面数据

    history.pushState({
        pageId: this.currentPage
    }, '')
})

window.addEventListener('popstate', event => {
    if(!_.isUndefined(event.state.pageId)) {
    // 做相应修改页面操作

    }
})

 

欢迎关注、点赞