改变url 页面不刷新 location.hash history.pushState history.replaceState

URL的hash

URL的hash也就是锚点（#），本质就是改变window.location的href属性
可以通过改变 location.hash 来改变href，页面不会刷新

window.location.hash = "xxx" // =>  /#xxx

监听hash变化

 window.onhashchange = function(e){
    console.log('hash',e)
}

HTML5的history模式：pushState

HTML5的history文档

// js对象 空字符串 地址
history.pushState({}, '', '/ggg')

HTML5的history模式：replaceState

替换地址 不能返回

// js对象 空字符串 地址
history.replaceState({}, '', 'home')
history.replaceState({}, '', '/home/xxx')

监听变化

pushState，replaceState 并不会触发popstate事件
使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转会触发popstate事件

window.onpopstate = function(e){
    // window.history.state;
    console.log('histroy',e) 
}

要自定义方法监听 pushState，replaceState 方法的使用
https://blog.csdn.net/sinat_17775997/article/details/88400750