vue-router,利用router.beforeEach未登入跳轉到登入頁
阿新 • • 發佈:2019-02-01
vue-router提供了導航鉤子,我們使用全域性的鉤子,在進入頁面前判斷是否登入
全域性鉤子 你可以使用 router.beforeEach 註冊一個全域性的 before 鉤子: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 當一個導航觸發時,全域性的 before 鉤子按照建立順序呼叫。鉤子是非同步解析執行,此時導航在所有鉤子 resolve 完之前一直處於 等待中。 每個鉤子方法接收三個引數: to: Route: 即將要進入的目標 路由物件 from: Route: 當前導航正要離開的路由 next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。 next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是 confirmed (確認的)。 next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了(可能是使用者手動或者瀏覽器後退按鈕),那麼 URL 地址會重置到 from 路由對應的地址。 next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷,然後進行一個新的導航。 確保要呼叫 next 方法,否則鉤子就不會被 resolved。 同樣可以註冊一個全域性的 after 鉤子,不過它不像 before 鉤子那樣,after 鉤子沒有 next 方法,不能改變導航: router.afterEach(route => { // ... })
例項
router.beforeEach((to, from, next) => { // 導航鉤子,全域性鉤子 localStorage.setItem('user','user'); var user = localStorage.getItem('user'); if(!user){ if(to.name != 'Login' && to.name != 'Signin' && to.name != 'Register'){ !!user ? next() : next('/login'); }else{ next(); } }else{ next(); } })