手写前端路由（hash）

hash路由

特点

1. 路由里面会有#标识
2. 路由切换不会调用后台接口
3. 实现简单，兼容性好，兼容到IE8
4. 无需后端配合设置，前端独立完成
5. 浏览器能够记录地址，支持传统路由的方法（go, back…）

实现原理

通过监听hashChange事件捕捉#后面路由的切换，从而去路由表里匹配对应的组件进行渲染。

代码

//首先从咋们所使用的的vu-router进行参考，在vue项目里面进行路由配置时，首先会有一个路由表。
const routes = [
	{name: 'index', path: '/', component: '<div>首页</div>' },
	{name: 'user', path: '/user', component: '<div>我的</div>' },
	{name: 'login', path: '/login', component: '<div>登录</div>' },
]
//然后我们根据路由表进行分析，
//当路由发生改变后，hashChange事件监听到路由的变化，便捕捉最新的路由，拿到表里进行匹配，
//找到确切的path路径后，取出对应组件进行渲染
//（注意要考虑匹配不上的情况，这个时候可以跳到首页或者登录页面）
class Router {
  constructor(routes = []) {
    this.routes = routes
    this.curPath = ''
    this.oldPath = ''
    // 改变this指向，指向自己
    this.refresh = this.refresh.bind(this)
    // 监听路由改变
    window.addEventListener('hashchange', this.refresh)
    // 页面刷新的时候
    window.addEventListener('load', this.refresh)
  }
  // 获取当前path
  getCurPath(url) {
    let index = url.indexOf('#')
    if(index > -1) {
      return url.slice(index + 1)
    }else {
      return '/'
    }
  }
  refresh(event) {
  	//hashchange事件对象里面存有新旧路由newURL，oldURL
    if(event.newURL) {
      this.curPath = this.getCurPath(event.newURL)
      // 存储旧的路由，如果下一次跳转的路由不存在就回到该路由
      this.oldPath = event.oldURL
    }else {
    //初次加载执行load方法，使用location.hash获取当前路由
      this.curPath = this.getCurPath(location.hash)
    }
    this.renderComponents()
  }

  renderComponents() {
    let app = document.querySelector('#app')
    let curPageArr = this.routes.filter(item => item.path === this.curPath)
    if(curPageArr.length > 0) {
      app.innerHTML = curPageArr[0].component
    }else {
      location.href = event.oldURL
    }
  }
}

//注册使用
const router = new Router(routes)