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就可以了