js原生实现路由router

最新推荐文章于 2024-06-26 09:52:54 发布

youyuliu

最新推荐文章于 2024-06-26 09:52:54 发布

阅读量4.8k

点赞数

分类专栏： JS原生

JS原生专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <ul>
        <li>
            <a href="#/">turn white</a>
        </li>
        <li>
            <a href="#/blue">turn blue</a>
        </li>
        <li>
            <a href="#/green">turn green</a>
        </li>
    </ul>

    <script>
        function Router() {
            this.routes = {};
            this.currentUrl = '';
        }
        Router.prototype.route = function (path, callback) {
            this.routes[path] = callback || function () { };
        };
        Router.prototype.refresh = function () {
            this.currentUrl = location.hash.slice(1) || '/';
            this.routes[this.currentUrl]();
        };
        Router.prototype.init = function () {
            window.addEventListener('load', this.refresh.bind(this), false);
            window.addEventListener('hashchange', this.refresh.bind(this), false);
        }
        window.Router = new Router();
        window.Router.init();
    </script>
    <script>
        var content = document.querySelector('body');
        // change Page anything
        function changeBgColor(color) {
            content.style.backgroundColor = color;
        }
        Router.route('/', function () {
            changeBgColor('white');
        });
        Router.route('/blue', function () {
            changeBgColor('blue');
        });
        Router.route('/green', function () {
            changeBgColor('green');
        });

    </script>
</body>

</html>

来源：https://www.cnblogs.com/exhuasted/p/6839515.html

youyuliu

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js原生实现路由router

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录