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