hash和history 的區別僅僅是#嗎？

目前單頁應用（SPA）愈來愈成爲前端主流，單頁應用一大特色就是使用前端路由，由前端來直接控制路由跳轉邏輯，而再也不由後端人員控制，這給了前端更多的自由。

目前前端路由主要有兩種實現方式：hash模式和history模式，下面分別詳細說明。

hash模式
這個咱們應該不陌生，好比在用超連接製做錨點跳轉的時候，就會發現，url後面跟了"#id"，hash值就是url中從"#"號開始到結束的部分

hash值變化瀏覽器不會從新發起請求，可是會觸發window.hashChange事件，假如咱們在hashChange事件中獲取當前的hash值，並根據hash值來修改頁面內容，則達到了前端路由的目的。

html：菜單中href設置爲hash形式，id爲app中放置頁面內容

<ul id="menu">
    <li>
        <a href="#index">首頁</a>
    </li>
    <li>
        <a href="#news">資訊</a>
    </li>
    <li>
        <a href="#user">我的中心</a>
    </li>
</ul>

<div id="app"></div>
js：在window.onhashchange中獲取hash值，根據不一樣的值，修改app中不一樣的內容，起到了路由的效果

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>這是首頁內容</h1>'
            break
        case '#news':
            app.innerHTML = '<h1>這是新聞內容</h1>'
            break
        case '#user':
            app.innerHTML = '<h1>這是我的中心內容</h1>'
            break
        default:
            app.innerHTML = '<h1>404</h1>'
    }
}

window.onhashchange = hashChange

hashChange()
上面這個實現方式比較簡陋，咱們能夠再封裝一下

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)()  //首次進入頁面的時候沒有觸發hashchange，必需要就單獨調用一下
}

hashChange(callback){
    let self = this
    return function () {
        let hash = location.hash
        console.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>這是首頁內容</h1>'

})

router.add('#news',()=>{

return  '<h1>這是新聞內容</h1>'

})

router.add('#user',()=>{

return  '<h1>這是我的中心內容</h1>'

})

router.listen((renderHtml)=>{

let app = document.getElementById('app')
app.innerHTML = renderHtml

})
實現一個Router類，經過add方法添加路由配置，第一個參數爲路由路徑，第二個參數爲render函數，返回要插入頁面的html；經過listen方法，監聽hash變化，並將每一個路由返回的html，插入到app中。

這樣咱們就實現了一個簡單的hash路由。

history模式
hash模式看起來是比較醜的，都帶個"#"號，咱們也能夠採起history模式，history就是咱們平時看到的正常的鏈接形式

https://www.baidu.com#plan/index //hash模式路由
https://www.baidu.com/plan/index //history模式路由

history模式基於window.history對象的方法

在HTML4中，已經支持window.history對象來控制頁面歷史記錄跳轉，經常使用的方法包括：

history.forward(); //在歷史記錄中前進一步

history.back(); //在歷史記錄中後退一步

history.go(n): //在歷史記錄中跳轉n步驟，n=0爲刷新本頁,n=-1爲後退一頁。

在HTML5中，window.history對象獲得了擴展，新增的API包括：

history.pushState(data,title);//向歷史記錄中追加一條記錄

history.replaceState(data,title);//替換當前頁在歷史記錄中的信息。

history.state;//是一個屬性，能夠獲得當前頁的state信息。

window.onpopstate;//是一個事件，在點擊瀏覽器後退按鈕或js調用forward()、back()、go()時觸發。監聽函數中可傳入一個event對象，event.state即爲經過pushState()或replaceState()方法傳入的data參數

history模式原理能夠這樣理解，首先咱們要改造咱們的超連接，給每一個超連接增長onclick方法，阻止默認的超連接跳轉，改用history.pushState或history.replaceState來更改瀏覽器中的url，並修改頁面內容。因爲經過history的api調整，並不會向後端發起請求，因此也就達到了前端路由的目的。

若是用戶使用瀏覽器的前進後退按鈕，則會觸發window.onpopstate事件，監聽頁面根據路由地址修改頁面內容。

也不必定非要用超連接，任意元素做爲菜單都行，只要在點擊事件中經過history進行調整便可。

html：

<ul id="menu">

<li>
    <a href="/index">首頁</a>
</li>
<li>
    <a href="/news">資訊</a>
</li>
<li>
    <a href="/user">我的中心</a>
</li>

</ul>

<div id="app"></div>
js：

//改造超連接，阻止默認跳轉，默認的跳轉是會刷新頁面的
document.querySelector('#menu').addEventListener('click',function (e) {

if(e.target.nodeName ==='A'){
    e.preventDefault()

    let path = e.target.getAttribute('href')  //獲取超連接的href，改成pushState跳轉，不刷新頁面

    window.history.pushState({},'',path)  //修改瀏覽器中顯示的url地址
    render(path)  //根據path，更改頁面內容

}

})

function render(path) {

let app = document.getElementById('app')
switch (path) {
    case '/index':
        app.innerHTML = '<h1>這是首頁內容</h1>'
        break
    case '/news':
        app.innerHTML = '<h1>這是新聞內容</h1>'
        break
    case '/user':
        app.innerHTML = '<h1>這是我的中心內容</h1>'
        break
    default:
        app.innerHTML = '<h1>404</h1>'
}

}

//監聽瀏覽器前進後退事件，並根據當前路徑渲染頁面

window.onpopstate = function (e) {

render(location.pathname)

}

//第一次進入頁面顯示首頁
render('/index')
上面這個寫法太low，咱們能夠用類封裝一下，經過add方法添加路由，經過pushState進行跳轉，初始化時更改因此超連接的跳轉方式

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>這是首頁內容</h1>'

})

router.add('/news',()=>{

return  '<h1>這是新聞內容</h1>'

})

router.add('/user',()=>{

return  '<h1>這是我的中心內容</h1>'

})

router.listen((renderHtml)=>{

let app = document.getElementById('app')
app.innerHTML = renderHtml

})
固然，上面這個實現只是一個很是初級的demo，並不能用於真正的開發場景，只是加深對前端路由的理解。

hash模式和history模式的區別

hash模式較醜，history模式較優雅

pushState設置的新URL能夠是與當前URL同源的任意URL；而hash只可修改#後面的部分，故只可設置與當前同文檔的URL

pushState設置的新URL能夠與當前URL如出一轍，這樣也會把記錄添加到棧中；而hash設置的新值必須與原來不同纔會觸發記錄添加到棧中

pushState經過stateObject能夠添加任意類型的數據到記錄中；而hash只可添加短字符串

pushState可額外設置title屬性供後續使用

hash兼容IE8以上，history兼容IE10以上

history模式須要後端配合將全部訪問都指向index.html，不然用戶刷新頁面，會致使404錯誤