怎么理解Vue-Router中的導航鉤子

這篇文章主要講解了“怎么理解Vue-Router中的導航鉤子”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么理解Vue-Router中的導航鉤子”吧！

導航守衛

“導航”表示路由正在發生改變。

vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單個路由獨享的, 或者組件級的。

1.全局前置守衛----router.beforeEach

router.beforeEach 注冊一個全局前置守衛：

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

router.beforeEach((to, from, next) => {
  //  to:要去哪個頁面
  //  from:從哪里來
  //  next:它是一個函數。
  //     如果直接放行 next()
  //     如果要跳到其它頁 next(其它頁)
})

示例代碼：

router.beforeEach(async(to, from, next) => {
  NProgress.start() // 開啟進度條
  const token = store.state.user.token
  const userId = store.state.user.userInfo.userId
  console.log(token, to.path, from.path)
  if (token) {
    if (to.path === '/login') { // 有 token還要去login
      next('/')
      NProgress.done() // 關閉進度條
    } else { // 有 token，去其他頁面，放行
      if (!userId) {
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    if (to.path === '/login') { // 沒有token，去login，放行
      next()
    } else {
      next('/login') // 沒有token，去其他頁面
      NProgress.done()
    }
  }
})

小結

• router.beforeEach（回調（三個參數））

• 導航守衛函數中，一定要調用next( )

• to.path: to是一個路由對象，path表示路徑，是它的一個屬性

2. 全局后置鉤子----router.afterEach

router.afterEach 注冊一個全局后置鉤子：

你也可以注冊全局后置鉤子，然而和守衛不同的是，這些鉤子不會接受 next 函數也不會改變導航本身：

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

3. 全局解析守衛----router.beforeResolve

在 2.5.0+ 你可以用 router.beforeResolve 注冊一個全局守衛。這和 router.beforeEach 類似，區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就被調用。

4.路由獨享的守衛

你可以在路由配置上直接定義 beforeEnter 守衛：

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

5.組件內的守衛

• beforeRouteEnter

• beforeRouteUpdate (2.2 新增)

• beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 因為當守衛執行前，組件實例還沒被創建
  },
  beforeRouteUpdate(to, from, next) {
    // 在當前路由改變，但是該組件被復用時調用
    // 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
    // 可以訪問組件實例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例 `this`
  }
}

完整的導航解析流程

• 導航被觸發。

• 在失活的組件里調用 beforeRouteLeave 守衛。

• 調用全局的 beforeEach 守衛。

• 在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。

• 在路由配置里調用 beforeEnter。

• 解析異步路由組件。

• 在被激活的組件里調用 beforeRouteEnter。

• 調用全局的 beforeResolve 守衛 (2.5+)。

• 導航被確認。

• 調用全局的 afterEach 鉤子。

• 觸發 DOM 更新。

• 調用 beforeRouteEnter 守衛中傳給 next 的回調函數，創建好的組件實例會作為回調函數的參數傳入。

感謝各位的閱讀，以上就是“怎么理解Vue-Router中的導航鉤子”的內容了，經過本文的學習后，相信大家對怎么理解Vue-Router中的導航鉤子這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！