LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

路由的基本实现——hash路由

freeflydom
2023年5月30日 9:44 本文热度 450

问题提出

vue、react在路由的实现上,都有基于hash的路由。那么如何使用原生来实现呢?


比如类似下面这样的路由:

 


hashchange事件是实现路由的核心

hash实现路由的时候,最本质的原理就是hash值的变化,会引发一个hashchange事件,可以根据这个hash值的变化,加载不同的DOM。


html:

<div class="box flex-box">

    <span class="flex1 center route">home</span>

    <span class="flex1 center route">shop</span>

    <span class="flex1 center route">shopcar</span>

    <span class="flex1 center route">usercenter</span>

</div>

<div id="root"></div>


js:

//路由配置

const routes = [{

 path:'/0',

    template:'<div>00000000</div>'

},{

    path:'/1',

    template:'<div>11111111</div>'

},{

    path:'/2',

    template:'<div>22222222</div>'

},{

    path:'/3',

    template:'<div>33333333</div>'

}]

//基本实现

var mount = document.getElementById('root');

var list = document.getElementsByClassName('route');

for(var i = 0; i < list.length; i++){

    list[i].onclick = (function(i){

        return function(){

            //console.log(window.location,i);

            window.location.hash=`/${i}`;

        }

    })(i)

}

window.addEventListener('hashchange',function(e){

     console.log(e.newURL.split('#')[1]);

     var path = e.newURL.split('#')[1];

     var item = routes.find(function(item){

         return item.path == path;

     });

     mount.innerHTML = item.template;


 })


完整示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <style>

        .flex-box{

            display: flex;

        }

        .flex1{

            flex: 1;

        }

        .center{

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .box{

            height: 100px;

        }

        .route{

            border: 1px solid #ccc;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

    <div class="box flex-box">

        <span class="flex1 center route">home</span>

        <span class="flex1 center route">shop</span>

        <span class="flex1 center route">shopcar</span>

        <span class="flex1 center route">usercenter</span>

    </div>

    <div id="root"></div>


</body>

<script>

    const routes = [{

        path:'/0',

        template:'<div>00000000</div>'

    },{

        path:'/1',

        template:'<div>11111111</div>'

    },{

        path:'/2',

        template:'<div>22222222</div>'

    },{

        path:'/3',

        template:'<div>33333333</div>'

    }]

</script>

<script>

    var mount = document.getElementById('root');

    var list = document.getElementsByClassName('route');

    for(var i = 0; i < list.length; i++){

        list[i].onclick = (function(i){

            return function(){

                //console.log(window.location,i);

                window.location.hash=`/${i}`;

            }

        })(i)

    }

    window.addEventListener('hashchange',function(e){

        console.log(e.newURL.split('#')[1]);

        var path = e.newURL.split('#')[1];

        var item = routes.find(function(item){

            return item.path == path;

        });

        mount.innerHTML = item.template;


    })

</script>

</html>



————————————————

版权声明:本文为CSDN博主「mapbar_front」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/mapbar_front/article/details/80494623



该文章在 2023/5/30 9:44:27 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved