溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要用代碼詳解js實現無刷新監聽URL的變化，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
無刷新改變路由的兩種方法通過hash改變路由
代碼
window.location.hash='edit'
效果
http://xxxx/#edit
通過history改變路由
監聽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');
});看完上述內容，是不是對用代碼詳解js實現無刷新監聽URL的變化有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
