你可以使用 router.beforeEach 註冊一個全域性前置守衛：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

當一個導航觸發時，全域性前置守衛按照建立順序呼叫。守衛是非同步解析執行，此時導航在所有守衛 resolve 完之前一直處於 等待中。

每個守衛方法接收三個引數：

• to: Route: 即將要進入的目標 路由物件

• from: Route: 當前導航正要離開的路由

• next: Function

  : 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 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;