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

阅读 200

推荐阅读
日常杂记
用户专栏

7 人关注
29 篇文章
专栏主页