vue-router实现原理

vue-router基本原理

vue-router插件install方法里，会把VueRouter实例添加到所有Vue实例上，并且绑定监听了当前匹配的路由对象，代码如下：

  Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) { //@doc Vue参数中VueRouter实例
        this._routerRoot = this
        this._router = this.$options.router
        this._router.init(this) 
        Vue.util.defineReactive(this, '_route', this._router.history.current) //@doc 绑定监听当前路由
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })

VueRouter初始化完成后会监听popstate或hashchange事件,当事件发生改变，会查找当前匹配的路由并且更新当前路由。结合router-view,由于vue实例绑定了_route属性，当前路由发生改变时，出触发router-view的render函数，同时也会触发新老路由对应组件的钩子函数。

router-view

当路由发生改变时，重新执行render函数。router-view会找到对应的组件（如果使用了keep-alive，从缓存里直接返回对应的组件）进行渲染。

router-link

创建路由链接标签（默认a标签），绑定对应的事件，根据属性执行路由实例不通的方法。如：router.replace、router.push

const handler = e => {
  if (guardEvent(e)) {
    if (this.replace) {
      router.replace(location, noop)
    } else {
      router.push(location, noop)
    }
  }
}