詳解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; } //前端全棧學習交流圈:866109386 //面向1-3經驗前端開發人員 //幫助突破技術瓶頸,提升思維能力。
該方法首先檢查外掛是否已經載入,如果已經載入,直接返回 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 自身來用的。