在main.js文件中，我們使用createRouter方法來創(chuàng)建路由實例，此路由實例可以使用beforeEach來注冊全局的前置導(dǎo)航守衛(wèi)。每當觸發(fā)導(dǎo)航跳轉(zhuǎn)時，都會被此導(dǎo)航守衛(wèi)捕獲。示例如下：

當一個導(dǎo)航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于等待中。

每個守衛(wèi)方法接收兩個參數(shù)：to: 即將要跳轉(zhuǎn)到的路由對象；from: 當前導(dǎo)航將要離開的路由對象。

若注冊的beforeEach方法返回的是布爾值時，其用來決定是否允許此次導(dǎo)航跳轉(zhuǎn)。如以下代碼，所有路由跳轉(zhuǎn)都將被禁止。

router.beforeEach(async (to, from) => {

    Return false;

}

更多時候，我們會在beforeEach方法中返回一個路由配置對象來決定要跳轉(zhuǎn)的頁面。這種方式更加靈活，如：

router.beforeEach(async (to, from) => {

    If(to.name!= ‘setting’) {return {name:’setting’}}

}

可選的第三個參數(shù) next。由于在導(dǎo)航守衛(wèi)確認通過前，新的組件還沒有被創(chuàng)建，此時若想使用當前組件實例處理一些邏輯，則可以通過next參數(shù)注冊回調(diào)方法。如圖：

在beforeRouteUpdate和beforeRouteLeave方法中可以直接使用this關(guān)鍵字來獲取當前組件實例，無需額外的操作。