官方釋義：正如其名，vue-router 提供的導航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導航。有多種機會植入路由導航過程中：全局的, 單個路由獨享的, 或者組件級的。

記住參數(shù)或查詢的改變并不會觸發(fā)進入/離開的導航守衛(wèi)。你可以通過觀察 $route 對象來應(yīng)對這些變化，或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)。
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

全局前置守衛(wèi)

router.beforeEach

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

里面回調(diào)函數(shù)有三個參數(shù)：

• to: Route: 即將要進入的目標路由對象

• from: Route: 當前導航正要離開的路由

• next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。

一般來說，這個函數(shù)適合去處理一些路由權(quán)限加載之類的。

全局解析守衛(wèi)

router.beforeResolve，這和 router.beforeEach 類似，區(qū)別是在導航被確認之前，同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用，沒怎么用過。

全局后置守衛(wèi)

router.afterEach

router.afterEach((to, from) => {
  // ...
})

注意這個地方?jīng)]有next 函數(shù)，因為這個時候路由導航已經(jīng)確認了，next也沒有意義了。