前端路由的两种模式

一、hash模式

• hash的一个特点就是url中有一个#号，通过onhashchange事件监听#号后面内容的变化来进行路由跳转；
• 因为hash发生变化的url都会被浏览器记录下来，所以浏览器的前进后退都可以用；
• 但是url的样子会有点丑；

二、history模式

• history模式主要包含切换历史状态和修改历史状态；
• 切换历史状态它包含back()、forward()、go()三个方法，分别是后退、前进、跳转；
• 修改历史状态包含了pushState()和replaceState()两种方法，这两个方法都接受三个参数stateObj、title、url；

虽然它的url样子会好看一些，但是history模式有一个问题就是，如果用户F5刷新，它是会去请求服务器的，一旦服务器上没有相对应的资源，那么就会刷出404来；在hash模式中，前端路由修改的是#后面的内容，因为浏览器请求是不带#后面的内容的，所以这个对于hash是没有影响的；

三、实现一个简单路由

class Routers {
  constructor(){
    //以键对值形式存储路由
    this.routes = {}
    //当前路由的url
    this.currentUrl = ''
    //绑定this，防止监听时this改变
    this.refresh = this.refresh.bind(this)
    window.addEventListener('load',this.refresh)
    window.addEventListener('hashchange',this.refresh)
  }
  //将path路径及对应的函数储存起来
  routeCb(path,callback){
    this.routes[path] = callback || function(){}
  }
  //刷新
  refresh(){
    //获取当前路径的hash值
    this.currentUrl = location.hash.slice(1) || '/'
    //执行当前hash路径对应的函数
    this.routes[this.currentUrl]()
  }
}

代码实现： http://js.jirengu.com/sakawobaxi/2/edit