Vue Router beforeEach詳解

一、基本概念

在使用Vue Router進行頁面路由的過程中，beforeEach函數是一個非常重要的函數。它在每個路由跳轉之前都會被調用，可以用來進行一些全局的身份認證、頁面權限控制、頁面訪問量統計等。

beforeEach函數有三個參數：to、from、next。其中to表示即將跳轉的路由，from表示當前頁面的路由，next是一個回調函數，用來進行跳轉。

下面是一個基本的beforeEach函數示例：

router.beforeEach((to, from, next) => {
  // TODO: 在此處編寫全局路由守衛邏輯
  next()
})

二、路由守衛

Vue Router提供了一些路由守衛函數，用來控制路由的跳轉、進入、離開等。

1.全局前置守衛

即beforeEach函數，當全局的前置守衛被觸發時，所有的路由跳轉都會受到影響。

下面是一個前置守衛的示例：

router.beforeEach((to, from, next) => {
  // TODO: 在此處編寫全局路由守衛邏輯
  next()
})

2.全局解析守衛

即beforeResolve函數，在全局解析守衛被觸發時，所有的異步組件都被解析完畢。

下面是一個全局解析守衛的示例：

router.beforeResolve((to, from, next) => {
  // TODO: 在此處編寫全局解析守衛邏輯
  next()
})

3.全局後置鉤子

即afterEach函數，這個函數在每個路由跳轉完成之後被觸發。

下面是一個全局後置鉤子的示例：

router.afterEach((to, from) => {
  // TODO: 在此處編寫全局後置鉤子邏輯
})

4.路由獨享守衛

即路由配置中的beforeEnter函數，在路由獨享守衛被觸發時，只有該路由會受到影響。

下面是一個路由獨享守衛的示例：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // TODO: 在此處編寫路由獨享守衛邏輯
        next()
      }
    }
  ]
})

5.組件內守衛

即在組件中定義的beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave函數。

下面是一個組件內守衛的示例：

const Foo = {
  template: '<div>Foo</div>',
  beforeRouteEnter (to, from, next) {
    // TODO: 在此處編寫組件內beforeRouteEnter邏輯
    next()
  },
  beforeRouteUpdate (to, from, next) {
    // TODO: 在此處編寫組件內beforeRouteUpdate邏輯
    next()
  },
  beforeRouteLeave (to, from, next) {
    // TODO: 在此處編寫組件內beforeRouteLeave邏輯
    next()
  }
}

三、應用場景

beforeEach函數可以被用於多種場景和需求，下面是其中的一些應用場景：

1.身份認證

在進行路由跳轉之前，需要判斷用戶是否已經登錄。如果未登錄，則需要跳轉到登錄頁面，進行身份認證。

下面是一個身份認證的示例：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

2.頁面權限控制

在進行路由跳轉之前，需要判斷用戶是否有權限訪問該頁面。如果沒有權限，則需要跳轉到403頁面。

下面是一個頁面權限控制的示例：

router.beforeEach((to, from, next) => {
  const roles = localStorage.getItem('roles')
  if (to.meta.requiresRole) {
    if (!roles || !roles.includes(to.meta.requiresRole)) {
      next('/403')
    } else {
      next()
    }
  } else {
    next()
  }
})

3.頁面訪問量統計

在進行路由跳轉之前，可以統計頁面的訪問量，並上報到服務器，用於分析用戶訪問行為。

下面是一個頁面訪問量統計的示例：

router.beforeEach((to, from, next) => {
  const page = to.path
  // TODO: 統計page的訪問量
  next()
})

四、總結

在Vue Router中，beforeEach函數是一個非常重要的全局路由守衛函數。它可以被用於身份認證、頁面權限控制、頁面訪問量統計等多種應用場景。另外，在路由跳轉的過程中，還可以使用其他的路由守衛函數，如beforeResolve、afterEach、beforeEnter、beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave等。