無刷新改變路由的兩種方法通過hash改變路由
代碼
window.location.hash='edit'
效果
http://xxxx/#edit
通過history改變路由
history.back(): 返回瀏覽器會話歷史中的上一頁，跟瀏覽器的回退按鈕功能相同
history.forward():指向瀏覽器會話歷史中的下一頁，跟瀏覽器的前進按鈕相同
history.go(): 可以跳轉到瀏覽器會話歷史中的指定的某一個記錄頁
history.pushState()可以將給定的數據壓入到瀏覽器會話歷史棧中，該方法接收3個參數，對象，title和一串url。pushState後會改變當前頁面url
history.replaceState()將當前的會話頁面的url替換成指定的數據，replaceState後也會改變當前頁面的url
監聽url變化
監聽hash變化
window.onhashchange=function(event){ console.log(event); } //或者 window.addEventListener('hashchange',function(event){ console.log(event); })
監聽back/forward/go
如果是history.back(),history.forward()、history.go()那麼會觸發popstate事件
window.addEventListener('popstate', function(event) { console.log(event); })
但是，history.pushState()和history.replaceState()不會觸發popstate事件，所以需要自己手動增加事件
監聽pushState/replaceState
history.replaceState和pushState不會觸發popstate事件，那麼如何監聽這兩個行為呢。可以通過在方法裡面主動的去觸發popstate事件。另一種就是在方法中創建一個新的全局事件。
改造
const _historyWrap = function(type) { const orig = history[type]; const e = new Event(type); return function() { const rv = orig.apply(this, arguments); e.arguments = arguments; window.dispatchEvent(e); return rv; }; }; history.pushState = _historyWrap('pushState'); history.replaceState = _historyWrap('replaceState');
監聽
window.addEventListener('pushState', function(e) { console.log('change pushState'); }); window.addEventListener('replaceState', function(e) { console.log('change replaceState'); });
[lousu-xi ] js實現無刷新監聽URL的變化示例代碼詳解已經有258次圍觀