[JavaScript知识库]vue中的vueRouter源码分析

class historyRoute{
  construcor() {
    this.current = null;
  }
}
class vueRouter {
  constructor(options) {
    this.mode = options.mode || 'hash'; //模式
    this.routes = options.routes || []; //路由
    this.history = new historyRouter; //current值
    this.routesMap = this.createMap(this.routes) //转换成key-vaule
    this.init();
  }
  init() {
    if(this.mode =='hash') {
      location.hash ? '' : location.hash = '/';
      window.addEventListener('load',()=>{
        this.history.current = location.hash.slice(1)
      })
      window.addEventListener('hashchange',()=>{
        this.history.current = location.hash.slice(1)
      })
    }else {
      location.pathname ? '' : location.pathname = '/';
      window.addEventListener('load',()=>{
        this.history.current = location.pathname
      })
      window.addEventListener('popstate',()=>{
        this.history.current = location.pathname
      })
    }
  }
  createMap(routes) {
    return routes.reduce((pre,current)=>{
      pre[current.path] = current.component;
      return pre 
    })
  }
}
//Vue监视current变量
vueRouter.install = function(Vue) {
  Vue.mixin({
    beforeCreate() {
      if(this.$options && this.$options.router) {
        this._root = this; //就是把_root绑定到Vue实例
        this._router = this.$options.router;
        Vue.util.defineReactive(this, 'current', this._router.history)
      }else {
        this._root = this.$parent._root
      }
    }
  })
  //获取新组建以及render
  Vue.component('router-view',{
    //渲染新组件
    render(h) {
      let current = this._self._root._router.history.current;
      let routesMap = this._self._root._router.routesMap;
      return h(routesMap[current])
    }
  })
}
export default vueRouter