前言
這次真的是太久太久沒見了，夥伴們。不過…
學習真的沒有鬆懈，只是季度末要衝一衝績效，一下子把時間都充值了。（ps：我看應該是我的腦子需要充值）
今天帶來的依舊是Vue-Router的內容，畢竟是一個系列文章~
聊聊題目
為什麼要從API中看門道呢？
我們在使用vue-router的時候，其實就是按照API進行操作，而我們查看的源碼其實就是API的一種存在形式。隨著我對源碼深入的學習，也發現很多內容並不適合直接上乾貨，因為太乾了，所以開門見山反而效果不好。所以今天這篇文章是一個過渡章節，為接下來的內容扮演一個承上啟下的角色。
因此這篇文章，讓我們一起聊一聊API~
我們的push有哪些情況？
在實際工作中，編程式導航要比
在編程式路由中，我們可以接收一個對象、一個字符串，對象的key有path、name、query、params等等，但是需要相互組合。
這麼多情況vue-router要對push這麼多情況做一個處理，我們push接收的參數的類型是什麼？用flow設定為Location、RawLocation
翻譯過來就是未處理的、生的路徑。所以我們的push操作傳遞的是一個生冷的路徑，經過一次match的處理
變成vue-router所需要的結構,route類型
所以從API結合表層源碼來看，我們在進行編程式導航時的過程，先將未處理的路徑（ps:vue-router對這種未處理路徑沒法直接進行跳轉等操作）處理成一個規範的route類型，然後進行具體的路由跳轉內容。
命名路由與視圖
一個組件內可以有多個router-view組件，我接觸的幾個項目都是維護一個根結點的router-view。大部分都是這種結構
我們一個路徑下可以展示多個路由視圖組件嗎？
答案當然是肯定的，官方的命名視圖的例子（https://jsfiddle.net/posva/22wgksa3/）
可以看到，我們在同一個路徑下可以放置多個
其實人家本身希望你用components，你要只用一個人家就給你包裝成一個map，key呢就是默認值的意思。
再看看我們的vue-router2開始的路由守衛
路由守衛有哪些呢？
- 1:全局的beforeEach
- 2:單個路由配置的beforeEnter
- 3:全局的afterEach
- 4:組件內的路由守衛：
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
- 5:全局的beforeResolve（vue-router2.5新增）
別的守衛還有嗎？這麼看來是沒有了。
全局的beforeEnter、afterEach、beforeResolve為什麼會作用在每一個路由配置中呢？在index一章中，我們有三個存放守衛的數組大家還有印象嗎？
在router實例中存儲這些。所以我們在做路由跳轉的時候可以拿到這些守衛，其餘的守衛怎麼辦？只好在跳轉的時候具體情況具體執行，
守衛分為三個種類：
1：離開組件之前;2:進入組件（前後都有守衛）;3:更新組件之前。
所以一個路由的跳轉一定伴隨著如下幾個步驟：
- 1:跳轉我們稱之為transitionTo
- 2:那麼跳轉中進行一個confirmTransiton（跳轉前的準備）
- 3:跳轉結束時進行一個updateRoute的過程。
上述步驟中提到的confirmTransition：先收集到所有的守衛，把前置守衛們（前置！！！）連接成一個數組，跳轉前挨個執行，前置守衛執行完怎麼辦？都通過來，那就更新當前路由，更新完當前路由就執行一下後置守衛。
vue-router源碼中：
核心的路由跳轉方法就是transitionTo：
具體內容是由confirmTransition與updateRoute實現的
其餘的一些這這那那的容錯，並不影響主流程。
總結一下
對於push、replace傳遞的未處理的路徑，進行處理成vue-router可以操作的路徑。
對於多個router-view，我們可以選擇children，components來實現。
路由守衛為什麼可以有全局的，每個路由都可以用，因為在router實例上，我們每次跳轉都可以找到。
路由跳轉經歷了confirm確認與update更新兩步。
結束語
中秋節剛剛過去，十一馬上就到了：
沒有來得及給大家帶來祝福，希望大家十一的時候每次路由跳轉都不堵車！
最後如果各位小夥伴覺得文章寫的還不錯，記得分享給自己身邊還在編程這條路上的小夥伴們呦~每一個前端er（boy and girl），你們都不是一個人在戰鬥~
閱讀更多 碼農登陸 的文章
