vue检测路由后退操作_前端路由的实现

(点击上方 前端脑洞，可快速关注，感谢分享)

之前面试，面试官问了我一个前端路由与后端路由的问题 其实我之前在上线自己的博客遇到过下面这些问题

• 为啥我写的Vue应用在开发阶段都没问题，部署到服务端之后访问不了除了/的页面呢
• 为啥我写的SPA页面的路由用hash模式都没问题，改成history模式就问题百出呢
• 啥是前端路由啥是后端路由，要怎么配后端才能支持我的前端路由呢

什么是路由

理解Web路由这篇文章讲得特别好了。在Web开发过程中，经常会遇到『路由』的概念。那么，到底什么是路由？简单来说，路由就是URL到函数的映射。访问的URL会映射到相应的函数里(这个函数是广义的，可以是前端的函数也可以是后端的函数)，然后由相应的函数来决定返回给这个URL什么东西。路由就是在做一个匹配的工作。

前端路由是现代SPA应用必备的功能,每个现代前端框架都有对应的实现,例如vue-router、react-router。我们不想探究vue-router或者react-router们的实现，因为不管是哪种路由无外乎用兼容性更好的hash实现或者是H5 History实现，与框架几个只需要做相应的封装即可。

提前声明: 我们没有对传入的参数进行及时判断而规避错误,也没有考虑兼容性问题,仅仅对核心方法进行了实现.

1.hash路由

hash路由一个明显的标志是带有#,我们主要是通过监听url中的hash变化来进行路由跳转。hash的优势就是兼容性更好,在老版IE中都有运行,问题在于url中一直存在#不够美观,而且hash路由更像是Hack而非标准,相信随着发展更加标准化的History API会逐步蚕食掉hash路由的市场。

• 1.1 初始化class 我们用Class关键字初始化一个路由.

class Routers {
     
  constructor() {
     
    // 以键值对的形式储存路由
    this.routes = {};
    // 当前路由的URL
    this.currentUrl = '';
  }
}

• 1.2 实现路由hash储存与执行 在初始化完毕后我们需要思考两个问题:
• 将路由的hash以及对应的callback函数储存
• 触发路由hash变化后,执行对应的callback函数

class Routers {
     
  constructor() {
     
    this.routes = {};
    this.currentUrl = '';
  }
  // 将path路径与对应的callback函数储存
  route(path, callback) {
     
    this.routes[path] = callback || function() {};
  }
  // 刷新