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

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

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

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

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

    Return false;

}

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

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

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

}

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

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