hello大家好，今天我們來分享一下hash路由的原理。我們不管什麼vue還是react的框架，不要太在意框架，直接來看hash路由是怎麼實現的。

原理：onhashchange

hash路由是使用了onhashchange事件來實現的。我們先新建一個頁面，hashchange.html，快速創建一個頁面。然後啓動一個靜態服務，輸入http-server，執行，然後訪問，這個可以看到我們的頁面了，目前是一片空白。

先説一下hash值是什麼，hash值就是瀏覽器地址#後面的東西。

我們看一下如何獲取hash值，在地址後面追加#/hash然後F12打開控制枱然後輸入

window.location.hash;

這時候輸出的就是hash值了，#/hash

好，下一步寫JavaScript監聽一下onhashchange事件。

先寫兩個a標籤

<div>
    <a href="#/">首頁</a>
    <a href="#/detail">詳情</a>
</div>

一個跳到首頁，一個調到詳情頁面。

再寫上監聽事件，看一下到底是個什麼情況啊

window.onhashchange = (e) => {
        // 分析一下e
        console.log('e:', e);

        // 重要屬性oldURL和newURL
        console.log('oldURL', e.oldURL);
        console.log('newRUL', e.newURL);
    };

這裏有兩個比較重要的屬性oldURL和newURL，oldURL就是上一個URL地址，newURL就是新的URL地址。

接下來我們來實現一個最簡單的hash路由，先引用一下jQuery

<script src="<http://libs.baidu.com/jquery/2.0.0/jquery.min.js>"></script>

寫上代碼

<style>
    .router{
        display: none;
    }
</style>

<div class="router" id="index">首頁</div>
    <div class="router" id="detail">詳情頁面</div>

    function showRouter() {
        // 第一步獲取hash值
        let hash = window.location.hash;
        console.log('hash', window.location.hash);
        let hashValue = hash.replace('#/', '');
        // 隱藏所有router
        $(".router").hide();

        // 顯示對應的router
        let target = $("#" + hashValue);
        if(target.length > 0){
            $("#" + hashValue).show();
        }else{
            $("#index").show();
        }       
    }

我們刷新一下看看，點擊首頁、詳情可以看到正常的顯示對應的頁面了。這個時候注意看一下輸出。

連續點擊的時候並不會連續觸發onhashchange事件，這是因為只有當hash變化之後才會觸發這個事件。

我們再點擊一下刷新頁面看看，會發現首頁和詳情頁面都不見了，這是因為.router默認隱藏，而且hash值也沒有變化，自然不會顯示對應的div了。

只需要添加

$(function () {
        showRouter();
    });

這樣在頁面打開的時候檢查一下hash就可以了