Hash 路由的实现

使用过框架路由的人肯定都有注意到url中的#号，为什么hash路由页面不会跳转——还记得a链接的锚点是怎么实现的吗。

• 多个路由集中处理
• 匹配对应路由
• 利用回调处理相应的逻辑

代码(详细的注释)

    
    
     
index
    
     
item
    
     
list
  
    
  
  
  
    
     头部
    
  
    function Router() {       // 路由储存       this.routes = {};       // 当前路由       this.currentUrl = '';    }    Router.prototype = {      // 路由处理      route: function (path, callback) {        this.routes[path] = callback || function(){};      },       // 页面刷新      refresh: function () {        // 当前的hash值        this.currentUrl = location.hash.slice(1) || '/';        // 执行hash值改变后相对应的回调函数        this.routes[this.currentUrl]();      },      // 页面初始化      init: function () {        // 页面加载事件        window.addEventListener('load', this.refresh.bind(this), false);        // hash 值改变事件        window.addEventListener('hashchange', this.refresh.bind(this), false);      }    }       // 全局挂载    window.Router = new Router();    // 初始化    window.Router.init();    let obj = document.querySelector('.result');        function changeConent (cnt) {      obj.innerHTML = cnt    }    // 匹配路由做相应的操作    Router.route('/', () => {      changeConent("当前是首页");    })    Router.route('/item', () => {      changeConent('当前是item页面');    })    Router.route('/list', () => {      // ajax 的数据就可以这样去拼接      setTimeout(() => {        obj.innerHTML = '
Hello World
'      }, 1000)    })