準備工作
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 都做了些什麼 ？
- 滾動行爲的實現
- 如何實現異步加載組件（路由懶加載）