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)) {
    // 做相应修改页面操作

    }
})

欢迎关注、点赞

猜你喜欢

转载自blog.csdn.net/qq_33576343/article/details/84029639