HistoryAPI

1.History API

可以在不刷新页面的前提下动态改变浏览器地址栏中的URL地址，动态修改页面上所显示资源。

2.属性与方法

window.history 的方法和属性:

• 方法:back() 返回,forward() 前进,go() 1前进 -1返回 0刷新当前页面
• 属性:length（历史记录中页面总数）

3.H5新增方法

pushState

• 往历史记录里面添加一条新的当前页面的url
• history.pushState(state, title, url); 参数 :
• state:一个于指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以填null
• title:新标签页的标签，但是所有浏览器目前都忽略这个值，因此这里可以填null。
• url:新的网址，必须与前页面处在同一个域。浏览器的地址栏将显示这个网址。 注:只改变浏览器地址，并不会刷新加载

replaceState

替换当前的历史记录，不刷新页面popstate

• history.replaceState(state,title,url) 参数如上

4.H5新增事件

popstate

历史记录发生改变时触发，单单调用replaceState和pushState方法不会触发popState事件，只有用户点击浏览器的返回或前进按钮，或使用js的back(),forward(),go(),才会触发

可以监听 popstate 事件来听移动端的物理返回键或浏览器返回。

const backChange = {
    back(backChange){
        // 判断是否支持History API
        if (window.history && window.history.pushState) {
            // 往历史记录里面添加一条新的当前页面的url
            history.pushState(null, null, document.URL);
            // 给 popstate 绑定一个方法 监听页面刷新
            window.addEventListener('popstate',backChange , false);//false阻止默认事件
        }
    },
    remove(backChange){
        window.removeEventListener('popstate', backChange, false)
    }
}
export default backChange