路由和組件是有區別的：組件一般是在同一個頁面的不同模塊，但是路由是直接切換到另一個頁面，之前的頁面銷毀。

App.vue中的router-view會渲染頂級路由匹配到的組件。組件內部嵌套的router-view會渲染子路由匹配到的組件。

當路由跳轉的時候，我們需要一些權限判斷或者其他操作。這個時候就需要使用路由的鉤子函數。
定義：路由鉤子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的函數。
總體來講vue里面提供了三大類鉤子
1.全局守衛
router.beforeEach 全局前置守衛 進入路由之前
router.beforeResolve 全局解析守衛 在beforeRouteEnter調用之后調用
router.afterEach 全局后置鉤子 進入路由之后
2.路由守衛
router.beforeEnter進入路由之前
3.組件守衛
beforeRouteEnter 進入路由前
beforeRouteUpdate 路由復用同一個組件時
beforeRouteLeave 離開當前路由時

完整的導航解析流程

觸發進入其他路由。
調用要離開路由的組件守衛beforeRouteLeave
調用局前置守衛：beforeEach
在重用的組件里調用 beforeRouteUpdate
調用路由獨享守衛 beforeEnter。
解析異步路由組件。
在將要進入的路由組件中調用beforeRouteEnter
調用全局解析守衛 beforeResolve
導航被確認。
調用全局后置鉤子的 afterEach 鉤子。
觸發DOM更新(mounted)。
執行beforeRouteEnter 守衛中傳給 next 的回調函數
總結：除了router.afterEach是兩個參數to,from以外，其他都是三個參數，to,from,next

?

轉載于:https://www.cnblogs.com/zhouyideboke/p/11187721.html

總結

以上是生活随笔為你收集整理的vue-router的路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。