前端路由hash

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  body{height: 500px;}
</style>
<body>
<a href="#/">white</a>
<a href="#/qq">orange</a>
<a href="#/wq">purple</a>
  <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();
    var content = document.querySelector('body');
    // change Page anything
    function changeBgColor(color) {
        content.style.backgroundColor = color;
    }
    Router.route('/', function() {
        changeBgColor('white');
    });
    Router.route('/qq', function() {
        changeBgColor('orange');
    });
    Router.route('/wq', function() {
        changeBgColor('purple');
    });
  </script>
</body>
</html>
posted on 2017-06-20 18:18 传说中的页面仔阅读(200) 评论(0) 收藏举报