vue Router 路由守衛之beforeEach
阿新 • • 發佈:2018-12-04
你可以使用 router.beforeEach
註冊一個全域性前置守衛:
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
當一個導航觸發時,全域性前置守衛按照建立順序呼叫。守衛是非同步解析執行,此時導航在所有守衛 resolve 完之前一直處於 等待中。
每個守衛方法接收三個引數:
to: Route
: 即將要進入的目標 路由物件from: Route
: 當前導航正要離開的路由next: Function
next
方法的呼叫引數。next()
: 進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是 confirmed (確認的)。next(false)
: 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是使用者手動或者瀏覽器後退按鈕),那麼 URL 地址會重置到from
路由對應的地址。next('/')
或者next({ path: '/' })
: 跳轉到一個不同的地址。當前的導航被中斷,然後進行一個新的導航。你可以向next
replace: true
、name: 'home'
之類的選項以及任何用在router-link
的to
prop 或router.push
中的選項。next(error)
: (2.4.0+) 如果傳入next
的引數是一個Error
例項,則導航會被終止且該錯誤會被傳遞給router.onError()
註冊過的回撥。
確保要呼叫 next
方法,否則鉤子就不會被 resolved。
以上內容是官方提供的:
路由攔截是我們專案中經常遇到的普遍問題,例如當你訪問任何一個頁面的時候需要驗證該使用者有沒有登入等;
對此,vue-router提供的beforeRouter可以方便的實現路由的導航守衛;
啥也不說了上例子
// 列舉需要判斷登入狀態的“路由集合”,當跳轉至集合中的路由時,如果“未登入狀態”,則跳轉到登入頁面login; // 當直接進入登入頁面login時,如果“已登入狀態”,則跳轉到首頁home; const router = new Router({ routes: [ { path: ' / ', // 預設進入路由 redirect: ' /home ' // 重定向 }, { path: ' /login ', name: ' login ', }, { path: ' /home ', name: ' home ', }, { path: ' /list ', name: ' list ', }, { path: ' ** ', // 錯誤路由 redirect: ' /home ' // 重定向 }, ] });// 全域性路由守衛 router. beforeEach(( to, from, next) => { console. log( ' navigation-guards '); // to: Route: 即將要進入的目標 路由物件 // from: Route: 當前導航正要離開的路由 // next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。 const route = [ ' home ', ' list ']; let isLogin = isLogin; // 是否登入 // 未登入狀態;當路由到route指定頁時,跳轉至login if ( route. indexOf( to. name) >= 0) { if ( ! isLogin) { this. $router. push({ path: ' /login ',}); } } // 已登入狀態;當路由到login時,跳轉至home if ( to. name === ' login ') { if ( isLogin) { this. $router. push({ path: ' /home ',});; } } next(); });
export default router;