點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

詳解vue-router 初始化時做了什么

來源：懂視網責編：小采時間：2020-11-27 22:13:26

詳解vue-router 初始化時做了什么

詳解vue-router 初始化時做了什么:最近因為業務需要，實現了一個簡單的前端 router，正好也來看一下 vue router 是怎么實現的。這次先來一起看看 vue-router 初始化時做了什么。 vue router 的初始化使用步驟我們首先來看 vue-router 的使用步驟，然后再分別去看各個步驟都發生了什么。

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解vue-router 初始化時做了什么:最近因為業務需要，實現了一個簡單的前端 router，正好也來看一下 vue router 是怎么實現的。這次先來一起看看 vue-router 初始化時做了什么。 vue router 的初始化使用步驟我們首先來看 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 實際運行時發生了什么。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

詳解vue-router 初始化時做了什么

推薦度：

點擊下載本文 文檔為doc格式

標簽：了什么初始化 vue-router

熱門焦點

詳解vue-router 初始化時做了什么

詳解vue-router 初始化時做了什么

詳解vue-router 初始化時做了什么

最新推薦

猜你喜歡

熱門推薦