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

最近因为业务需要，实现了一个简单的前端 router，正好也来看一下 vue router 是怎么实现的。这次先来一起看看 vue-router 初始化时做了什么。

vue router 的初始化使用步骤

我们首先来看 vue-router 的使用步骤，然后再分别去看各个步骤都发生了什么。

使用 vue-router 需要经过一下几个步骤：

引入 vue-router：

import vuerouter from 'vue-router';

利用 vue 的插件机制，加载 vue-router：

vue.use(vuerouter);

实例化 vuerouter：

const router = new vuerouter({
routes
})

实例化 vue：

const app = new vue({
router
}).$mount('#app');

vue 的插件机制

vue 提供了一个 use 方法，来加载插件：

vue.use = function (plugin: function | object) {
 const installedplugins = (this._installedplugins || (this._installedplugins = []));
 if (installedplugins.indexof(plugin) > -1) {
  return this;
 }

 // additional parameters
 const args = toarray(arguments, 1);
 args.unshift(this);
 if (typeof plugin.install === 'function') {
  plugin.install.apply(plugin, args);
 } else if (typeof plugin === 'function') {
  plugin.apply(null, args);
 }
 installedplugins.push(plugin);
 return this;
}

该方法首先检查插件是否已经加载，如果已经加载，直接返回 this。

如果没有加载过，会取所有的参数，并将 this 放在第一个。优先执行 plugin.install 方法，若不能执行，则直接执行 plugin 自身。

最后将 plugin push 到插件列表中。

那么我们就需要看 vuerouter 的 install 方法做了什么，vuerouter 类定义在 src/index.js 文件中。

利用 vue 的插件机制，加载 vue-router

入口文件 index.js 对外 export 了一个 vuerouter 类。vuerouter 类包含了 router 的各种方法，我们直接先来看一下 install 方法。

install 方法在 index.js 中绑定在 vuerouter 类上：

import { install } from './install'
vuerouter.install = install

它的实际实现是在 ./install.js 中,install 方法主要做了以下几个事情：

1、设置了两个 mixin：beforecreate 和 destroyed。

vue.mixin({
 beforecreate () {
  if (isdef(this.$options.router)) {
   this._routerroot = this
   this._router = this.$options.router
   this._router.init(this)
   vue.util.definereactive(this, '_route', this._router.history.current)
  } else {
   this._routerroot = (this.$parent && this.$parent._routerroot) || this
  }
  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 中。由于 vue router 时以插件形式引入的，因此 这个 this.$options.router 还是给 vue router 自身来用的。

vue router 初始化所做的事情就是这些，下篇博客我们来一起看一下 vue router 实际运行时发生了什么。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。