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