午夜影院普通用户体验区,日本视频一区二区免费播放,一级毛片**免费播放视频

路由的基本實現——hash路由

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2023年5月30日 9:44 本文熱度 568

問題提出

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>

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

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

該文章在 2023/5/30 9:44:27 編輯過

關鍵字查詢

路由

實現

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

路由的基本實現——hash路由