在vue,uniap等項目中,路由守衛和接口攔截一樣是必不可缺少的一部分功能;
路由守衛分為 router.beforeEach(全局前置路由守衛)和 router.afterEach(全局后置路由守衛);
全局前置路由守衛有三個參數:
- to:將要跳轉到的路由頁面;
- from:從哪個路由頁面離開;
- next: 一定要調用該方法來resolve這個鈎子,將要執行什么樣的操作,可以用這個方法來調用;
- next(false)為中斷當前路由跳轉;
- next('/')或者next({ path: '/'}): 跳轉到一個不同的地址,或者你指定的頁面,當前導航被中斷了,然后進行一個新的導航。你可以向next傳遞位置對象,且允許設置為 replace:true、name:'home'之類的選項以及 任何用在router-link的to prop或者router.push中的選項。
- next(error): 如果傳入next的參數是一個error實例,則導航會被終止且該錯誤會被傳遞給router.onError注冊過的回調。
確保next函數在任何給定的導航守衛中都被嚴格調用一次。它可以出現多於一次,但是只能在所有的邏輯路徑都不重疊的情況下,否則鈎子永遠都不會被解析或報錯。
router.beforeEach((to,from,next) => {
if(...某某條件下){
next({name: 'login'})
}
next() //在執行某某條件下next,后下面也會執行,這樣為調用兩次
})
后置鈎子則就比較簡單了,兩個參數:to、from;
參數跟路由守衛前置鈎子的參數相同 ↑;
//然后路由跳轉之后需要執行什么事件,有你判斷;