vue router原始碼解析（一）

vue router是vue.js官方的路由管理器。它和vue.js的核心深度整合，讓構建單頁面應用變得易如反掌。

這裡主要通過閱讀vue-router的原始碼，對平時使用較多的一些特性以及功能，理解其背後實現的思路。

3.0.2

├── components // 元件 │ ├── link.js // route-link的實現 │ └── view.js // route-view的實現 ├── create-matcher.js // 建立匹配 ├── create-route-map.js // 建立路由的對映 ├── history // 操作瀏覽器記錄的一系列內容 │ ├── abstract.js // 非瀏覽器的history │ ├── base.js // 基本的history │ ├── hash.js // hash模式的history │ └── html5.js // html5模式的history ├── index.js // 入口檔案 ├── install.js // 外掛程式安裝的方法 └── util // 工具類庫 ├── async.js // 非同步操作的工具庫 ├── dom.js // dom相關的函式 ├── location.js // 對location的處理 ├── misc.js // 乙個工具方法 ├── params.js // 處理引數 ├── path.js // 處理路徑 ├── push-state.js // 處理html模式的 pushstate ├── query.js //對query的處理 ├── resolve-components.js //非同步載入元件 ├── route.js // 路由 ├── scroll.js //處理滾動

└── warn.js // 列印一些警告

我們知道，我們在使用 vue-router 的時候，主要有以下幾步：

// 1. 安裝 外掛程式
vue.use(vuerouter);
// 2. 建立router物件
const router = new vuerouter(]
});// 3. 掛載router
router

其中vuerouter物件，就在vue-router的入口檔案src/index.js

vuerouter原型上定義了一系列的函式，我們日常經常會使用到。主要有：go 、 push 、 replace 、 back 、 forward。

以及一些導航守護：beforeeach 、beforeresolve 、aftereach等等

上面html中使用到的router-view，以及經常用到的router-link則存在src/components目錄下。

到這裡相信你對整個專案結構有乙個大概的認識。接下來，我們會根據以下幾點，一步步拆解vue-router。

檢視系列文章

vue router原始碼解析（一）

vue router原始碼解讀

vue router原始碼隨筆

TFS原始碼解析一

vue router原始碼解析（一）

vue router原始碼解讀

vue router原始碼隨筆

TFS原始碼解析一

相關推薦