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

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

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

完整的導(dǎo)航解析流程

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhouyideboke/p/11187721.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。