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 的時候 ，主要有如下幾步：

<div id="app">
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
</div>

// 1. 安裝 插件
Vue.use(VueRouter);

// 2. 建立router對象
const router = new VueRouter({
    routes // 路由列表 eg: [{ path: '/foo', component: Foo }]
});

// 3. 掛載router
const app = new Vue({
    router
}).$mount('#app');

其中 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 插件方式的實現
• 路由模式及降級處理的實現
• 導航守衛的原理
• 路由匹配詳解
• 組件：route-view 和 route-link 都作了些什麼 ？
• 滾動行爲的實現
• 如何實現異步加載組件（路由懶加載）

其餘

查看系列文章