hash和history路由模式區(qū)別示例解析
目前單頁(yè)應(yīng)用（SPA）越來越成為前端主流，單頁(yè)應(yīng)用一大特點(diǎn)就是使用前端路由，由前端來直接控制路由跳轉(zhuǎn)邏輯，而不再由后端人員控制，這給了前端更多的自由。
目前前端路由主要有兩種實(shí)現(xiàn)方式：hash模式和history模式，下面分別詳細(xì)說明。
hash模式這個(gè)我們應(yīng)該不陌生，比如在用超鏈接制作錨點(diǎn)跳轉(zhuǎn)的時(shí)候，就會(huì)發(fā)現(xiàn)，url后面跟了"#id"，hash值就是url中從"#"號(hào)開始到結(jié)束的部分
hash值變化瀏覽器不會(huì)重新發(fā)起請(qǐng)求，但是會(huì)觸發(fā)window.hashChange事件，假如我們?cè)趆ashChange事件中獲取當(dāng)前的hash值，并根據(jù)hash值來修改頁(yè)面內(nèi)容，則達(dá)到了前端路由的目的。
html：菜單中href設(shè)置為hash形式，id為app中放置頁(yè)面內(nèi)容
<ul id='menu'> <li><a rel='external nofollow' >首頁(yè)</a> </li> <li><a rel='external nofollow' >資訊</a> </li> <li><a rel='external nofollow' >個(gè)人中心</a> </li></ul><div id="app"></div>
js：在window.onhashchange中獲取hash值，根據(jù)不同的值，修改app中不同的內(nèi)容，起到了路由的效果
function hashChange(e){ // console.log(location.hash) // console.log(location.href) // // console.log(e.newURL) // console.log(e.oldURL) let app = document.getElementById('app') switch (location.hash) {case '#index': app.innerHTML = '<h1>這是首頁(yè)內(nèi)容</h1>' breakcase '#news': app.innerHTML = '<h1>這是新聞內(nèi)容</h1>' breakcase '#user': app.innerHTML = '<h1>這是個(gè)人中心內(nèi)容</h1>' breakdefault: app.innerHTML = '<h1>404</h1>' }}window.onhashchange = hashChange
hashChange()上面這個(gè)實(shí)現(xiàn)方式比較簡(jiǎn)陋，我們可以再封裝一下
class Router {constructor(){ this.routers = [] //存放我們的路由配置}add(route,callback){ this.routers.push({path:route,render:callback })}listen(callback){ window.onhashchange = this.hashChange(callback) this.hashChange(callback)() //首次進(jìn)入頁(yè)面的時(shí)候沒有觸發(fā)hashchange，必須要就單獨(dú)調(diào)用一下}hashChange(callback){ let self = this return function () {let hash = location.hashconsole.log(hash)for(let i=0;i<self.routers.length;i++){ let route = self.routers[i] if(hash===route.path){callback(route.render())return }} }}}let router = new Router()router.add('#index',()=>{return '<h1>這是首頁(yè)內(nèi)容</h1>'})router.add('#news',()=>{return ?'<h1>這是新聞內(nèi)容</h1>'})router.add('#user',()=>{return ?'<h1>這是個(gè)人中心內(nèi)容</h1>'})router.listen((renderHtml)=>{let app = document.getElementById('app')app.innerHTML = renderHtml})實(shí)現(xiàn)一個(gè)Router類，通過add方法添加路由配置，第一個(gè)參數(shù)為路由路徑，第二個(gè)參數(shù)為render函數(shù)，返回要插入頁(yè)面的html；通過listen方法，監(jiān)聽hash變化，并將每個(gè)路由返回的html，插入到app中。
這樣我們就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的hash路由。
history模式hash模式看起來是比較丑的，都帶個(gè)"#"號(hào)，我們也可以采取history模式，history就是我們平時(shí)看到的正常的連接形式
https://www.baidu.com#plan/index //hash模式路由https://www.baidu.com/plan/index //history模式路由
history模式基于window.history對(duì)象的方法
在HTML4中，已經(jīng)支持window.history對(duì)象來控制頁(yè)面歷史記錄跳轉(zhuǎn)，常用的方法包括：
history.forward(); //在歷史記錄中前進(jìn)一步
history.back(); //在歷史記錄中后退一步
history.go(n): //在歷史記錄中跳轉(zhuǎn)n步驟，n=0為刷新本頁(yè),n=-1為后退一頁(yè)。
在HTML5中，window.history對(duì)象得到了擴(kuò)展，新增的API包括：
history.pushState(data,title);//向歷史記錄中追加一條記錄
history.replaceState(data,title);//替換當(dāng)前頁(yè)在歷史記錄中的信息。
history.state;//是一個(gè)屬性，可以得到當(dāng)前頁(yè)的state信息。
window.onpopstate;//是一個(gè)事件，在點(diǎn)擊瀏覽器后退按鈕或js調(diào)用forward()、back()、go()時(shí)觸發(fā)。監(jiān)聽函數(shù)中可傳入一個(gè)event對(duì)象，event.state即為通過pushState()或replaceState()方法傳入的data參數(shù)
history模式原理可以這樣理解，首先我們要改造我們的超鏈接，給每個(gè)超鏈接增加onclick方法，阻止默認(rèn)的超鏈接跳轉(zhuǎn)，改用history.pushState或history.replaceState來更改瀏覽器中的url，并修改頁(yè)面內(nèi)容。由于通過history的api調(diào)整，并不會(huì)向后端發(fā)起請(qǐng)求，所以也就達(dá)到了前端路由的目的。
如果用戶使用瀏覽器的前進(jìn)后退按鈕，則會(huì)觸發(fā)window.onpopstate事件，監(jiān)聽頁(yè)面根據(jù)路由地址修改頁(yè)面內(nèi)容。
也不一定非要用超鏈接，任意元素作為菜單都行，只要在點(diǎn)擊事件中通過history進(jìn)行調(diào)整即可。
html：
<ul id='menu'><li> <a rel='external nofollow' >首頁(yè)</a></li><li> <a rel='external nofollow' >資訊</a></li><li> <a rel='external nofollow' >個(gè)人中心</a></li></ul><div id='app'></div>js：
//改造超鏈接，阻止默認(rèn)跳轉(zhuǎn)，默認(rèn)的跳轉(zhuǎn)是會(huì)刷新頁(yè)面的document.querySelector('#menu').addEventListener('click',function (e) {if(e.target.nodeName ==='A'){ e.preventDefault() let path = e.target.getAttribute('href') //獲取超鏈接的href，改為pushState跳轉(zhuǎn)，不刷新頁(yè)面 window.history.pushState({},'',path) //修改瀏覽器中顯示的url地址 render(path) //根據(jù)path，更改頁(yè)面內(nèi)容}})function render(path) {let app = document.getElementById('app')switch (path) { case '/index':app.innerHTML = '<h1>這是首頁(yè)內(nèi)容</h1>'break case '/news':app.innerHTML = '<h1>這是新聞內(nèi)容</h1>'break case '/user':app.innerHTML = '<h1>這是個(gè)人中心內(nèi)容</h1>'break default:app.innerHTML = '<h1>404</h1>'}}//監(jiān)聽瀏覽器前進(jìn)后退事件，并根據(jù)當(dāng)前路徑渲染頁(yè)面window.onpopstate = function (e) { render(location.pathname)}//第一次進(jìn)入頁(yè)面顯示首頁(yè)render('/index')上面這個(gè)寫法太low，我們可以用類封裝一下，通過add方法添加路由，通過pushState進(jìn)行跳轉(zhuǎn)，初始化時(shí)更改所以超鏈接的跳轉(zhuǎn)方式class Router { constructor(){ this.routers = [] this.renderCallback = null}add(route,callback){ this.routers.push({path:route,render:callback })}pushState(path,data={}){ window.history.pushState(data,'',path) this.renderHtml(path)}listen(callback){ this.renderCallback = callback this.changeA() window.onpopstate = ()=>this.renderHtml(this.getCurrentPath()) this.renderHtml(this.getCurrentPath())}changeA(){ document.addEventListener('click', (e)=> {if(e.target.nodeName==='A'){ e.preventDefault() let path = e.target.getAttribute('href') this.pushState(path)} })}getCurrentPath(){ return location.pathname}renderHtml(path){ for(let i=0;i<this.routers.length;i++){let route = this.routers[i]if(path===route.path){ this.renderCallback(route.render()) return} }}}let router = new Router()router.add('/index',()=>{return '<h1>這是首頁(yè)內(nèi)容</h1>'})router.add('/news',()=>{return '<h1>這是新聞內(nèi)容</h1>'})router.add('/user',()=>{return '<h1>這是個(gè)人中心內(nèi)容</h1>'})router.listen((renderHtml)=>{let app = document.getElementById('app')app.innerHTML = renderHtml})當(dāng)然，上面這個(gè)實(shí)現(xiàn)只是一個(gè)非常初級(jí)的demo，并不能用于真正的開發(fā)場(chǎng)景，只是加深對(duì)前端路由的理解。
hash模式和history模式的區(qū)別hash模式較丑，history模式較優(yōu)雅
pushState設(shè)置的新URL可以是與當(dāng)前URL同源的任意URL；而hash只可修改#后面的部分，故只可設(shè)置與當(dāng)前同文檔的URL
pushState設(shè)置的新URL可以與當(dāng)前URL一模一樣，這樣也會(huì)把記錄添加到棧中；而hash設(shè)置的新值必須與原來不一樣才會(huì)觸發(fā)記錄添加到棧中
pushState通過stateObject可以添加任意類型的數(shù)據(jù)到記錄中；而hash只可添加短字符串
pushState可額外設(shè)置title屬性供后續(xù)使用
hash兼容IE8以上，history兼容IE10以上
history模式需要后端配合將所有訪問都指向index.html，否則用戶刷新頁(yè)面，會(huì)導(dǎo)致404錯(cuò)誤
以上就是hash和history路由模式區(qū)別示例解析的詳細(xì)內(nèi)容，更多關(guān)于hash history路由模式區(qū)別的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
網(wǎng)公網(wǎng)安備