详解vue-router 初始化时做了什么

}
registerInstance(this, this)
},
destroyed () {
registerInstance(this)
}
})

2、在 Vue 上绑定 $route 和 $router。

Object.defineProperty(Vue.prototype, '$router', {
 get () { return this._routerRoot._router }
})
Object.defineProperty(Vue.prototype, '$route', {
 get () { return this._routerRoot._route }
})

3、注册两个组件，View 和 Link。

Vue.component('RouterView', View)
Vue.component('RouterLink', Link)

4、设置 beforeRouteEnter、beforeRouteLeave 和 beforeRouteUpdate 的 merge 策略。merge 策略的介绍可以见 这里 ，简单来说就是有重复的值时如何合并。

const strats = Vue.config.optionMergeStrategies
// use the same hook merging strategy for route hooks
strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created

实例化 VueRouter

我们来看一下 VueRouter 的构造函数。首先，constructor 会初始化一些属性：

this.app = null
this.apps = []this.options = options
this.beforeHooks = []this.resolveHooks = []this.afterHooks = []this.matcher = createMatcher(options.routes || [], this)

其中 matcher 比较重要，后面会详细说。

之后会决定使用哪种模式：

let mode = options.mode || 'hash'
this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
if (this.fallback) {
 mode = 'hash'
}
if (!inBrowser) {
 mode = 'abstract'
}
this.mode = mode
switch (mode) {
 case 'history':
  this.history = new HTML5History(this, options.base)
  break
 case 'hash':
  this.history = new HashHistory(this, options.base, this.fallback)
  break
 case 'abstract':
  this.history = new AbstractHistory(this, options.base)
  break
 default:
  if (process.env.NODE_ENV !== 'production') {
   assert(false, `invalid mode: ${mode}`)
  }
}

由于 history 模式中的pushstate方法还有一些浏览器没有支持。history 模式在浏览器不支持时会回退到hash模式。

之后根据不同模式选择实例化不同模式的history类，可以看到 hash 模式和 history 模式分别对应了 HashHistory 和 HTML5History 两个类。

此外，如果是服务器端渲染，需要进行 router 匹配来获取要渲染的页面。此时服务器环境中没有history api，因此要自行抽象实现一个，就是 AbstractHistory。

实例化 Vue

实例化为Vue 类时，会将 VueRouter 的实例传入，这个变量放在

this.$options.router 								 
 2/3   首页 上一页 1 2 3 下一页 尾页