VueRouter之載入解析VueRouter檔案

阿新 • • 發佈：2019-01-20

前言

vue-router是Vue專案中元件化的核心，負責路由跳轉，本系列會分析路由跳轉的具體實現邏輯，目標是梳理路由跳轉的實現邏輯。分析的版本是VueRouter最新版本，是build之後的vue-router.js檔案。

具體分析

從簡單例項出發分析整個流程：
html檔案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://unpkg.com/vue/dist/vue.js" 
></script>
  <script src="./vue-router.js"></script>
 </head>
<body>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p 
>
    <router-view></router-view>
  </div>
  <script>
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    // 定義路由跳轉關係
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
    // 定義路由物件 

    const router = new VueRouter({
      routes
    })
    // 將router註冊到Vue中
    const app = new Vue({
      router
    }).$mount('#app')
  </script>
</body>
</html>

效果：
這裡寫圖片描述

通過script標籤來載入解析vue-router檔案，解析執行vue-router發生了什麼呢？這是接下來需要分析的。

VueRouter解析過程

vue-router檔案在載入解析過程中處理邏輯如下：
這裡寫圖片描述

實際vue-router檔案解析的過程做的主要事情有四點：

定義router-view元件

定義router-link元件

建立初始路由Route物件

滿足瀏覽器環境以及Vue存在，就執行Vue.use(VueRouter)

暴露VueRouter

Vue外掛的使用方式就是Vue.use(外掛)，此時會呼叫外掛中的install方法

所以Vue.use(VueRouter)實際上是呼叫VueRouter中的install方法，通過原始碼可知：

VueRouter.install = install;

接下來就具體分析install函式的邏輯。

install

install是建立的初始化過程，它的具體處理邏輯如下：
這裡寫圖片描述

install函式中邏輯主要點有如下幾點：

保證初始化的唯一性

混入beforeCreate和destroyed生命週期函式

定義並監聽 $r o u t e r 、$ route屬性

在Vue.config.optionMergeStrategies上自定義beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate混入，使用created的混入策略

實際上最主要是第二條，在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);

首先判斷new Vue()例項中是否存在router屬性, 在解析的時候還沒有new Vue()所以此處為false

存在就：

設定router根例項是當前例項

設定_router屬性值為VueRouter例項物件

呼叫例項物件的init()，進行初始化

使用Vue.util中的defineReactive定義this物件的響應屬性_route為當前路由模組

不存在：就判斷是否存在父元件，存在就將父元件中的_routeRoot賦值為當前例項的_routerRoot

註冊例項

總結

在vue-router初始化的過程中可以看到，實現上主要的工作就幾點：

全域性註冊router-view、router-link元件
使用Vue.mixin往所有元件中混入beforeCreate、destroyed生命週期函式
beforeRouteLeave、beforeRouteEnter、beforeRouteUpdate自定義混合到元件中，混合策略與created相同
暴露VueRouter建構函式

下一篇文章主要分析new VueRouter的過程。

VueRouter之載入解析VueRouter檔案

前言 vue-router是Vue專案中元件化的核心，負責路由跳轉，本系列會分析路由跳轉的具體實現邏輯，目標是梳理路由跳轉的實現邏輯。分析的版本是VueRouter最新版本，是build之後的vue-router.js檔案。具體分析從簡單例項出發分析整

XSS漏洞之載入遠端js檔案

這次在對一個系統滲透測試過程中，發現一個XSS漏洞，可彈窗，並且沒有httponly 但是在嘗試載入遠端js檔案的時候發現，script標籤被過濾掉了，準確的說應該是伺服器後端在識別到輸入內容有<>的時候，會把每對尖括號以及尖括號裡面的內容都過濾掉，唯獨有一個特例，就是img標籤不會在網上找了一

Java:簡單的解析XML檔案之使用DOM解析

XML簡介要理解XML，HTML等格式，先來理解文件物件模型DOM 　　根據 DOM，HTML 文件中的每個成分都是一個節點，這些節點組成了一棵樹。DOM 是這樣規定的：整個文件是一個文件節點每個 HTML 標籤是一個元素節點包含在 HTML 元素中的文字是文字節點每一個 HTML 屬性是一個屬性節

.NET Core實戰專案之CMS 第三章入門篇-原始碼解析配置檔案及依賴注入

作者：依樂祝原文連結：https://www.cnblogs.com/yilezhu/p/9998021.html 寫在前面上篇文章我給大家講解了ASP.NET Core的概念及為什麼使用它，接著帶著你一步一步的配置了.NET Core的開發環境並建立了一個ASP.NET Core的mvc專

mybatis原始碼-解析配置檔案（三）之配置檔案Configuration解析(超詳細，值得收藏)

1. 簡介 1.1 系列內容本系列文章講解的是mybatis解析配置檔案內部的邏輯，即 Reader reader = Resources.getResourceAsReader("mybatis-config.xml"); SqlSessionFact

mybatis 解析配置檔案（一）之XML的DOM解析方式

簡介在之前的文章《mybatis 初步使用（IDEA的Maven專案, 超詳細）》中，講解了mybatis的初步使用，並總結了以下mybatis的執行流程：通過 Resources 工具類讀取 mybatis-config.xml，存入 Reader； SqlSessionFactoryBuil

mybatis原始碼-解析配置檔案（二）之解析的流程

1. 簡介在之前的文章《mybatis 初步使用（IDEA的Maven專案, 超詳細）》中，講解了mybatis的初步使用，並總結了以下mybatis的執行流程：通過 Resources 工具類讀取 mybatis-config.xml，

中科之旅------matlab生成wav檔案和解析wav檔案

生成wav： % 生成時間序列 fs = 5000; % [Hz] 訊號取樣頻率 T = 1; % [s] 訊號長度 x = 0:1/fs:T; % [s] 時間序列 % 生成訊號序列 f = 440; % [Hz] 訊號

Java之DOM4J解析XML 實現 XML檔案資料的增刪改查方法

下面是我的Persons.xml檔案資料 <?xml version="1.0" encoding="utf-8"?> <persons> <person id="0"> <name>翠花</name>

mybatis原始碼-解析配置檔案（四）之配置檔案Mapper解析

其中， mappers作為configuration節點的一部分配置，在本文章中，我們講解解析mappers節點，即 xxxMapper.xml 檔案的解析。 1 解析入口在解析 mybatis-config.xml 時，會進行解析 xxxMapper.xml 的檔案。在圖示流程的 XMLCo

mybatis原始碼-解析配置檔案（四-1）之配置檔案Mapper解析(cache)

1. 簡介本文章主要講解的是， xxxMapper.xml 檔案中， cache 節點的原始碼。 2. 解析 XMLMapperBuilder.cacheElement() 方法主要負責解析 <cache> private void cacheElement(XNode context)

VueRouter 原始碼深度解析

該文章內容節選自團隊的開源專案 InterviewMap。專案目前內容包含了 JS、網路、瀏覽器相關、效能優化、安全、框架、Git、資料結構、演算法等內容，無論是基礎還是進階，亦或是原始碼解讀，你都能在本圖譜中得到滿意的答案，希望這個面試圖譜能夠幫助到大家更好的準備面試。

Android逆向之旅---解析編譯之後的Resource arsc檔案格式

一、前言快過年了，先提前祝賀大家新年快樂，這篇文章也是今年最後一篇了。今天我們繼續來看逆向的相關知識，前篇文章中我們介紹瞭如何解析Android中編譯之後的AndroidManifest.xml檔案格式：http://blog.csdn.net/jiangwei09104100

Scrapy從json檔案載入解析規則,使一個爬蟲重複使用.並進行資料清洗

我們在scrapy框架做爬蟲的時候,對於不同規則的頁面,需要寫不同的爬蟲檔案,在這種情況下,部分程式碼需要重複書寫很不方便,對於這種問題.我們可以通過json檔案載入解析規則的方法,來解決這樣個問題. 同時在爬取到的資料中也有一些資料是我們不需要的,同時資料的型別/格式也可能不是我們需要的.

Java解析xml檔案之增刪改查

XML是什麼: 可擴充套件的標記語言 XML能幹什麼: 描述資料、儲存資料、傳輸（交換）資料。 XML文件節點型別： u 文件(document) u 元素(element) u 屬性(attribu

SpringBoot之載入自定義配置檔案

SpringBoot預設載入配置檔名為：application.properties和application.yml，如果需要使用自定義的配置檔案，則通過@PropertySource註解指定。 JavaBean： package org.springboot.model; imp

VueRouter之router-view小記

router-view可以實現區域性載入，很方便，但是也有坑。router-view使用的前提是，區域性載入的元件和載入它的元件要有父子關係，也就是說，需要在載入router-view的元件配置children路由如：{ path: '/attend',

Springboot 之使用POI讀取解析Excel檔案

本文章來自【知識林】在上一篇文章《Springboot 之 POI匯出Word檔案》中講述了使用POI對Word的匯出操作，這一篇將繼續講述POI的其他使用：對Excel表格的讀寫操作。準備E

孫其功陪你學之——OpenGL載入OBJ模型檔案並進行紋理修飾

本人在學習opengl做專案時，需要設計三維人臉模型。於是尋找多種方案。求得用opengl讀取OBJ模型檔案，並進行紋理修飾這一解決方案。在使用中用到了glm庫。以下是我對glm.c庫的兩篇分析。http://blog.csdn.net/a350203223/article

iOS學習之載入storyboard和xib檔案

1.載入storyboard(故事板) //a) 獲取故事板 UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"故事板的名字" bundle:nil]; //b) 將故事板中的檢視覆蓋導航檢視(方法

VueRouter之載入解析VueRouter檔案

前言

具體分析

VueRouter解析過程

install

總結

相關推薦