前端路由的实现

浏览器中window.location属性window.history属性

export function FrontRouter() {
  this.routes = {};
  this.preHash = '/';
  this.curHash = '/';
  window.addEventListener('load', this.resolve.bind(this), false);
  window.addEventListener('hashchange', this.resolve.bind(this), false);
}

FrontRouter.prototype.route = function(path, callback) {
  this.routes[path] = callback || function() {};
};

FrontRouter.prototype.back = function() {
  location.hash = '#' + this.preHash;
  console.log('pre_hash:', location.hash);
}

FrontRouter.prototype.resolve = function() {
  this.preHash = this.curHash;
  this.curHash = location.hash.slice(1) || '/';
  typeof this.routes[this.curHash] === 'function' &&
    this.routes[this.curHash]();
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容