实现简单路由

前端-pww

于 2022-04-04 01:30:37 发布

阅读量2.4k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/csD_Dscnnnnnnn/article/details/123947860

版权

js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1,建立路由函数，对象routes存储path(key):回调函数；curUrl表示当前路径

其中三个函数的作用：

init 监听load和hashchange函数，执行refresh函数（bind(this)）

route :把回调函数（或空函数）存储到this.routes[path]中

refresh ：获取当前url:location.hash.slice(1) || '/';执行当前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>Document</title>
</head>
<body>
    <ul>
        <li><a onclick="location.href='#/'">11111</a></li>
        <li><a href="#/admin">22222222</a></li>
        <li><a onclick="location.href='#/server'">333333333</a></li>
    </ul>
    <div id="div">展示</div>

    <script type="text/javascript">

        function Router(){
            this.routes={}
            this.curUrl=''

            //添加回调函数
            this.route=function(path,callback){
                this.routes[path]=callback||function(){}
            }
            //执行回调函数
            this.refresh=function(){
                //获取url
                this.curUrl=location.hash.slice(1)||'/'
                this.routes[this.curUrl]()
            }
            //监听load和hashchange
            this.init=function(){
                window.addEventListener('load',this.refresh.bind(this),false)
                window.addEventListener('hashchange',this.refresh.bind(this),false)
            }
        }

        let res=document.getElementById('div')
        let R=new Router()
        //触发监听
        R.init()
        R.route('/',function(){
            res.style.backgroundColor='pink'
            res.innerHTML='11111'
        })
        R.route('/admin',function(){
            res.style.backgroundColor='blue'
            res.innerHTML='22222'
        })
        R.route('/server',function(){
            res.style.backgroundColor='pink'
            res.innerHTML='333333'
        })
    </script>
</body>
</html>