無刷新改變路由的兩種方法通過hash改變路由

代碼

window.location.hash=’edit’

效果

http://xxxx/#edit

通過history改變路由

history.back(): 返回瀏覽器會話歷史中的上一頁，跟瀏覽器的回退按鈕功能相同 history.forward():指向瀏覽器會話歷史中的下一頁，跟瀏覽器的前進(jìn)按鈕相同 history.go(): 可以跳轉(zhuǎn)到瀏覽器會話歷史中的指定的某一個記錄頁 history.pushState()可以將給定的數(shù)據(jù)壓入到瀏覽器會話歷史棧中，該方法接收3個參數(shù)，對象，title和一串url。pushState后會改變當(dāng)前頁面url history.replaceState()將當(dāng)前的會話頁面的url替換成指定的數(shù)據(jù)，replaceState后也會改變當(dāng)前頁面的url

監(jiān)聽url變化

監(jiān)聽hash變化

window.onhashchange=function(event){ console.log(event);}//或者window.addEventListener(’hashchange’,function(event){ console.log(event);})

監(jiān)聽back/forward/go

如果是history.back(),history.forward()、history.go()那么會觸發(fā)popstate事件

window.addEventListener(’popstate’, function(event) { console.log(event);})

但是，history.pushState()和history.replaceState()不會觸發(fā)popstate事件，所以需要自己手動增加事件

監(jiān)聽pushState/replaceState

history.replaceState和pushState不會觸發(fā)popstate事件，那么如何監(jiān)聽這兩個行為呢。可以通過在方法里面主動的去觸發(fā)popstate事件。另一種就是在方法中創(chuàng)建一個新的全局事件。

改造

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’);

監(jiān)聽

window.addEventListener(’pushState’, function(e) { console.log(’change pushState’);});window.addEventListener(’replaceState’, function(e) { console.log(’change replaceState’);});

總結(jié)

到此這篇關(guān)于js如何無刷新監(jiān)聽URL的變化的文章就介紹到這了,更多相關(guān)js 無刷新監(jiān)聽url變化內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！