详解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 实际运行时发生了什么。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: Python进程间通信用法实例