单页面路由实现原理-hash

最新推荐文章于 2022-10-24 18:19:11 发布

芜独独

最新推荐文章于 2022-10-24 18:19:11 发布

阅读量186

点赞数

文章标签： js html javascript

本文链接：https://blog.csdn.net/awwwwmman/article/details/115281471

版权

单页面路由实现原理

前端开发的路由，其实就是操作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>