在 Vue 中，導航守衛是路由系統提供的一種功能，用于在導航過程中執行一些前置/后置處理邏輯。導航守衛分為全局導航守衛和局部導航守衛兩種。下面將介紹 Vue 中全局導航守衛的執行順序。

全局導航守衛有三個鉤子函數：beforeEach、afterEach、beforeResolve。在執行導航時，這三個鉤子函數的執行順序如下：

const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) =>{
console.log('beforeEach')
next()
})
router.beforeResolve((to, from, next) =>{
console.log('beforeResolve')
next()
})
router.afterEach((to, from) =>{
console.log('afterEach')
})
router.push('/home')

在上述代碼中，VueRouter 實例化后，執行了三個全局導航守衛鉤子函數。先執行 beforeEach，然后執行 beforeResolve，最后執行 afterEach。在導航過程中，beforeEach 和 beforeResolve 鉤子函數都需要調用 next 方法才能繼續導航，而 afterEach 鉤子函數沒有 next 方法。

beforeEach 鉤子函數用于在導航開始之前執行一些前置處理邏輯，比如身份認證、用戶權限驗證等。如果不調用 next 方法，導航會被中斷。

beforeResolve 鉤子函數在 beforeEach 鉤子函數之后被調用，用于在導航被確定之前執行一些異步處理邏輯。該鉤子函數不能中斷導航，如果不調用 next 方法，導航將一直卡在當前頁面。

afterEach 鉤子函數在導航成功完成后被調用，用于執行一些后置處理邏輯，比如頁面統計、日志記錄等。該鉤子函數沒有 next 方法，不能中斷導航。

在全局導航守衛中，要注意調用 next 方法的時機，否則會影響導航的正常流程。

除了全局導航守衛，Vue 還提供了局部路由守衛，可以在需要的路由組件中定義 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 等鉤子函數。這些鉤子函數執行的順序與全局導航守衛類似，但只在對應的路由組件被訪問時被調用。

以上就是 Vue 中導航守衛的執行順序，全局導航守衛需要調用 next 方法才能繼續導航，而 afterEach 鉤子函數沒有 next 方法。在編寫導航守衛的邏輯時，需要根據需要選擇全局導航守衛或局部路由守衛。