美文网首页
前端路由的实现

前端路由的实现

作者: 笑笑料料 | 来源:发表于2019-04-04 10:29 被阅读0次

浏览器中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]();
};

相关文章

  • 前端路由的简易实现

    前端路由实现前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 ur...

  • vue路由

    今日目标 1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够...

  • vue路由

    今日目标 1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够...

  • 实现一个简易的前端路由

    实现一个简易的前端路由

  • 面试:谈谈对前端路由的理解?

    面试官想听到什么答案呢? 1、为什么会出现前端路由。 2、前端路由解决了什么问题。 3、前端路由实现的原理是什么。...

  • SPA 中前端路由原理与实现方式

    SPA 中前端路由原理与实现方式 通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现: ...

  • vue权限路由实现的方法示例总结

    使用全局路由守卫 实现 前端定义好路由,并且在路由上标记相应的权限信息 前端全栈学习交流圈:866109386,面...

  • vue-router 源码实现前端路由的两种方式

    在学习 vue-router 的代码之前,先来简单了解一下前端路由。 前端路由主要有两种实现方法: Hash 路由...

  • 04-15动态路由的实现与优化

    Vue中后台鉴权的另一种思路 - 动态路由的实现与优化 鉴权-前端路由 VS 鉴权-动态路由 前端路由鉴权相信只要...

  • 前端路由

    什么是前端路由 前端路由的前生今世及实现原理 先有的SPA,页面内部交互无刷新,再到页面跳转也无刷新,因此路由出现了

网友评论

      本文标题:前端路由的实现

      本文链接:https://www.haomeiwen.com/subject/hqtjpqtx.html