hash模式下路由的实现

想了解一下路由的原理，首先了解到的是hash模式下路由的实现:
html结构

    <!-- 这个是html结构 -->
    <ul>
        <li><a href="#/">首页</a></li>
        <li><a href="#/second">第二页</a></li>
        <li><a href="#/third">第三页</a></li>
    </ul>
    <div class="show-box"></div>

js部分

  //首先需要写一个路由对象，就像vue里面的vue-router,在这个对象里会有三个方法帮助我们完成路由的工作
    class Router {
        constructor () {
            this.routers = {};
            this.prensentRouter = '';  
        }
        //第一个方法是,创造路由和内容
        route (path,callBack) {
            this.routers[path] = callBack || function () {};
        }
        //第二个方法是实现在hash改变的时候执行路由对应的行为
        reRouter () {
            this.prensentRouter = location.hash.slice(1) || '/';
            this.routers[this.prensentRouter]();
        }
        //第三个方法就是实现hashChange时候reRouter执行的事件监听
        init () {
            window.addEventListener ('load',this.reRouter.bind(this),false); 
            window.addEventListener ('hashchange',this.reRouter.bind(this),false); 
        }
    }
    //开始调用
    let router = new Router();
    let showBox = document.querySelector('.show-box');
    router.init();
    //创建路由
    router.route('/', ()=>{
        showBox.innerHTML = "<h1>首页</h1>"
        showBox.style.backgroundColor = 'green'
    })
    router.route('/second',()=>{
        showBox.innerHTML = "<h1>第二页</h1>"
        showBox.style.backgroundColor = 'yellow'
    })
    router.route('/third',()=>{
        showBox.innerHTML = "<h1>第三页</h1>"
        showBox.style.backgroundColor = 'blue'
    })