路由導航守衛

一、認識路由導航守衛

路由導航守衛是Vue Router提供的一種機制，用於控制路由跳轉的行為，類似於前端的許可權控制。通過使用路由導航守衛，我們可以在路由切換時對訪問用戶進行控制，比如需要用戶登陸後才能訪問某些頁面，或是在用戶需要離開當前頁面之前進行一些提醒等。

Vue Router提供了三種路由導航守衛：全局守衛、路由獨享守衛和組件內的守衛。其中全局守衛會在每個路由跳轉時都會執行，而路由獨享守衛和組件內的守衛只在特定的路由跳轉情況下才會執行。

二、全局守衛

全局守衛是在路由跳轉前、路由跳轉時和路由跳轉後都可以進行一些處理，使用全局守衛需要在Vue Router實例中使用beforeEach、beforeResolve和afterEach方法，這些方法都需要傳遞一個回調函數作為參數。

1、beforeEach

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

router.beforeEach((to, from, next) => {
  // to: Route: 即將要進入的目標 路由對象
  // from: Route: 當前導航正要離開的路由
  // next: Function: 一定要調用該方法來 resolve 這個鉤子。next()、next('/login') ...
})

beforeEach方法在路由即將跳轉的情況下會被執行，to和from參數分別表示即將進入的目標路由和當前路由，next方法必須被調用以決定路由是否可以跳轉。next方法可以傳遞一個參數，參數為新的路由路徑，用於重定向到新的路由路徑。

2、beforeResolve

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

router.beforeResolve((to, from, next) => {
  // to: Route: 即將要進入的目標 路由對象
  // from: Route: 當前導航正要離開的路由
  // next: Function: 進入跳轉路由
})

beforeResolve方法在路由確認跳轉之前被觸發，它和beforeEach方法的區別是beforeResolve方法會等待所有非同步鉤子執行完畢，確保在路由跳轉前所有非同步數據都已經載入完畢。

3、afterEach

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

router.afterEach((to, from) => {
  // to: Route: 進入目標路由對象
  // from: Route: 離開的路由對象
})

afterEach方法在路由跳轉完成後被觸發，可以用於做一些頁面跳轉後的統計分析等操作。

三、路由獨享守衛

路由獨享守衛是在配置路由時添加守衛，用於在某些路由跳轉時進行特定的處理。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter(to, from, next) {
        // ...
      }
    }
  ]
})

在配置路由時，可以使用beforeEnter方法添加路由獨享守衛，它和全局守衛的beforeEach方法類似，但只會在當前路由跳轉時進行處理。

四、組件內的守衛

在Vue組件內可以使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave鉤子函數來設置路由守衛。

1、beforeRouteEnter

export default {
  beforeRouteEnter(to, from, next) {
    // ...
  }
}

beforeRouteEnter方法在進入當前組件的路由跳轉時被調用，但實例尚未被創建。

注意：在beforeRouteEnter守衛中不能使用this，因為它執行時組件實例還沒有被創建。

2、beforeRouteUpdate

export default {
  beforeRouteUpdate(to, from, next) {
    // ...
  }
}

beforeRouteUpdate方法在當前組件已經被複用時（例如相同路徑之間的路由跳轉），對路由參數的變化進行處理。

3、beforeRouteLeave

export default {
  beforeRouteLeave(to, from, next) {
    // ...
  }
}

beforeRouteLeave方法在離開當前路由時被調用，可以用於在離開前進行確認提示等操作。

結語

路由導航守衛是Vue Router提供的一種強大的功能，可以對路由跳轉進行全面的控制和自定義操作。無論是全局守衛，還是路由獨享守衛和組件內的守衛，都可以根據不同的需求進行靈活配置，為前端開發提供更多的選擇和功能。