hash路由原理

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就能夠了