Vue.js 是一個構建數據驅動的 Web 界面的漸進式框架，核心庫叫做「Vue」，這個庫只關注視圖層，採用自底向上增量開發的設計。

Vue.js 官方提供了一個擴展插件 Vue Router，它允許構建 SPA（Single Page Application）單頁面應用程序。Vue Router 的作用是將每個路由映射到一個組件，然後將組件渲染到 DOM 中。

Vue Router 允許開發人員在路由改變時添加「鉤子函數」，並且支持許多不同類型的鉤子。本篇文章將深入解析 Vue 路由的各種鉤子函數及其作用。

一、全局前置守衛：beforeEach

使用 Vue Router 時，它提供了多個路由導航鉤子，其作用類似於其他框架中路由的生命周期函數。其中，全局前置守衛 `beforeEach` 是最常用的一個。這個鉤子函數會在路由即將改變前被調用。我們可以利用這個鉤子函數，實現登錄、許可權驗證等場景。

beforeEach 函數接收三個參數：

1. to: 即將要進入的目標路由對象
2. from: 當前導航正要離開的路由對象
3. next: 調用該方法後，才能進入下一個鉤子函數，否則路由將會被中斷

const router = new Router({
  routes: [
    {
      path: '/admin',
      component: Admin,
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!userLoggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

上面的代碼實現了一個簡單的登錄許可權校驗，如果用戶未登錄，路由將被重定向到登錄頁；否則，用戶將被跳轉到下一步操作的路由。

二、全局後置鉤子：afterEach

Vue Router 還提供了另外一個路由導航鉤子函數 afterEach，這個函數會在路由改變之後被調用。它沒有 next 參數，也就不能中斷路由，但我們常常可以利用這個鉤子函數，實現頁面的統計、日誌列印等操作。

router.afterEach((to, from) => {
  logPageView(to.path)
})

上面的代碼實現了一個簡單的頁面訪問日誌列印，每當路由改變後，將會記錄下頁面的相關信息。

三、組件內守衛

在 Vue Router 中，我們還可以使用組件內路由鉤子，這些鉤子函數作用於組件級別。常用的組件內路由鉤子有這幾個：

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

這些鉤子每次都會在相應的路由導航期間觸發。

3.1 beforeRouteEnter

beforeRouteEnter 鉤子可以訪問組件實例 `this`，但是此時組件實例尚未創建。beforeRouteEnter 鉤子中，不能使用 `this.props` 訪問組件 props。

如果需要訪問組件 props，我們可以通過回調函數，將 props 作為參數來傳遞。

const Post = {

props: ['id', 'title'],
 beforeRouteEnter (to, from, next) {
 axios.get(`/api/post/${to.params.id}`)
 .then(response => {
 next(vm => {
 vm.post = response.data
 })
 })
 },
 data () {
 return {
 post: null
 }
 },
 template: `
{{ post.title }}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/194666.html