手写极简版vue-router

let Vue = '' // 保存Vue实例
class VueRouter {
  constructor (options) {
    this.$options = options // 保存路由配置信息
    Vue.util.defineReactive(this, 'current', window.location.hash.substring(1) || '/') // 为非响应式对象添加响应式属性（不能用Vue.set()的原因是其要求目标对象是响应式对象）
    // 侦听hashchange事件，更新current
    window.addEventListener('hashchange', () => {
      this.current = window.location.hash.substring(1)
    })
  }
}
VueRouter.install = function (_Vue) {
  Vue = _Vue
  // 注册实例的$router
  Vue.mixin({
    beforeCreate () {
      // 判断是不是main.js中的根实例
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router
      }
    }
  })
  // 注册全局组件router-link
  Vue.component('router-link', {
    props: {
      to: {
        type: String,
        required: true
      }
    },
    render (h) {
      return h('a', {
        attrs: {
          href: '#' + this.to
        }
      }, this.$slots.default)
    }
  })
  // 注册全局组件router-view
  Vue.component('router-view', {
    render (h) {
      const route = this.$router.$options.routes.find(route => route.path === this.$router.current) // 从路由配置信息中查找匹配的路由
      return h((route && route.component) || 'div')
    }
  })
}

export default VueRouter