单页面路由实现原理-hash

Posted 2022-12-04 芜独独

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单页面路由实现原理-hash相关的知识，希望对你有一定的参考价值。

单页面路由实现原理

前端开发的路由，其实就是操作url地址

1.改变浏览器的地址
2.内容区切换内容

hash：改变url时，不会刷新页面
监听事件，hashchange，监听url路径的变化

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单页面路由实现原理-hash</title>
    <style type="text/css">
        a,
        #divId 
            font-size: 33px;
        
    </style>
</head>

<body>
    <!-- data-url是自定义的属性 -->
    <ul>
        <li><a data-url="/aa">aaa</a></li>
        <li><a data-url="/bb">bbb</a></li>
        <li><a data-url="/cc">ccc</a></li>
    </ul>
    <div id="divId">默认内容</div>
</body>
<script>
    // 路由数据
    var _routeData = [
        path: '/aa',
        pathData: 'aaaaaa页'
    , 
        path: '/bb',
        pathData: 'bbbbbb页'
    , 
        path: '/cc',
        pathData: 'cccccc页'
    , ];
    // 获取数据
    var _aBtn = document.getElementsByTagName("a");
    // 内容区
    var _divId = document.getElementById("divId");
    // 路由变量
    var _path;

    for (var i = 0; i < _aBtn.length; i++) 
        // 批量处理监听按钮事件
        _aBtn[i].addEventListener('click', function() 
            // console.log(this.getAttribute('data-url')); 检查按钮是否被监听到
            _path = this.getAttribute('data-url');
            window.location.hash = _path; //改变浏览器的路由
        )
    

    window.addEventListener('hashchange', function() 
        // 修改匹配内容
        _routeData.map(item => 
            // 当路由匹配时，更改div里面的内容
            if (_path == item.path) 
                _divId.innerHTML = item.pathData;
            
        )
    )
</script>

</html>

以上是关于单页面路由实现原理-hash的主要内容，如果未能解决你的问题，请参考以下文章

vue路由原理

利用hash或history实现单页面路由