前言
路由跳轉(zhuǎn)前做一些驗(yàn)證,比如登錄驗(yàn)證,是網(wǎng)站中的普遍需求。
對此末盔,vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)(navigation-guards)。
導(dǎo)航守衛(wèi)(navigation-guards)這個名字座慰,聽起來怪怪的陨舱,但既然官方文檔是這樣翻譯的,就姑且這么叫吧版仔。
全局守衛(wèi)
你可以使用?router.beforeEach?注冊一個全局前置守衛(wèi):
當(dāng)一個導(dǎo)航觸發(fā)時游盲,全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行蛮粮,此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于?等待中背桐。
每個守衛(wèi)方法接收三個參數(shù):
to: Route: 即將要進(jìn)入的目標(biāo)路由對象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來?resolve?這個鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)蝉揍。
next(): 進(jìn)行管道中的下一個鉤子链峭。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是?confirmed?(確認(rèn)的)又沾。
next(false): 中斷當(dāng)前的導(dǎo)航弊仪。如果瀏覽器的 URL 改變了(可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到from路由對應(yīng)的地址杖刷。
next('/')或者next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址励饵。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個新的導(dǎo)航滑燃。
next(error): (2.4.0+) 如果傳入next的參數(shù)是一個Error實(shí)例役听,則導(dǎo)航會被終止且該錯誤會被傳遞給router.onError()注冊過的回調(diào)。
確保要調(diào)用next方法,否則鉤子就不會被 resolved典予。
下面寫一個例子:
校驗(yàn)是否登錄