這篇文章主要講解了“怎么理解Vue-Router中的導(dǎo)航鉤子”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么理解Vue-Router中的導(dǎo)航鉤子”吧！

網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)的開(kāi)發(fā)，更需要了解用戶，從用戶角度來(lái)建設(shè)網(wǎng)站，獲得較好的用戶體驗(yàn)。成都創(chuàng)新互聯(lián)公司多年互聯(lián)網(wǎng)經(jīng)驗(yàn)，見(jiàn)的多，溝通容易、能幫助客戶提出的運(yùn)營(yíng)建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇成都創(chuàng)新互聯(lián)公司，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來(lái)訪用戶感受到浩方產(chǎn)品的價(jià)值服務(wù)。

導(dǎo)航守衛(wèi)

“導(dǎo)航”表示路由正在發(fā)生改變。

vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會(huì)植入路由導(dǎo)航過(guò)程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。

1.全局前置守衛(wèi)----router.beforeEach

router.beforeEach注冊(cè)一個(gè)全局前置守衛(wèi)：

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

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

示例代碼：

router.beforeEach(async(to, from, next) => {
  NProgress.start() // 開(kāi)啟進(jìn)度條
  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() // 關(guān)閉進(jìn)度條
    } else { // 有 token，去其他頁(yè)面，放行
      if (!userId) {
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    if (to.path === '/login') { // 沒(méi)有token，去login，放行
      next()
    } else {
      next('/login') // 沒(méi)有token，去其他頁(yè)面
      NProgress.done()
    }
  }
})

小結(jié)

• router.beforeEach（回調(diào)（三個(gè)參數(shù)））

• 導(dǎo)航守衛(wèi)函數(shù)中，一定要調(diào)用next( )

• to.path: to是一個(gè)路由對(duì)象，path表示路徑，是它的一個(gè)屬性

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

router.afterEach注冊(cè)一個(gè)全局后置鉤子：

你也可以注冊(cè)全局后置鉤子，然而和守衛(wèi)不同的是，這些鉤子不會(huì)接受 next 函數(shù)也不會(huì)改變導(dǎo)航本身：

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

3. 全局解析守衛(wèi)----router.beforeResolve

在 2.5.0+ 你可以用 router.beforeResolve 注冊(cè)一個(gè)全局守衛(wèi)。這和 router.beforeEach 類似，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用。

4.路由獨(dú)享的守衛(wèi)

你可以在路由配置上直接定義 beforeEnter 守衛(wèi)：

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

5.組件內(nèi)的守衛(wèi)

• beforeRouteEnter

• beforeRouteUpdate (2.2 新增)

• beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
  },
  beforeRouteUpdate(to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問(wèn)組件實(shí)例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問(wèn)組件實(shí)例 `this`
  }
}

完整的導(dǎo)航解析流程

• 導(dǎo)航被觸發(fā)。

• 在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)。

• 調(diào)用全局的 beforeEach 守衛(wèi)。

• 在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。

• 在路由配置里調(diào)用 beforeEnter。

• 解析異步路由組件。

• 在被激活的組件里調(diào)用 beforeRouteEnter。

• 調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。

• 導(dǎo)航被確認(rèn)。

• 調(diào)用全局的 afterEach 鉤子。

• 觸發(fā) DOM 更新。

• 調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入。

感謝各位的閱讀，以上就是“怎么理解Vue-Router中的導(dǎo)航鉤子”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么理解Vue-Router中的導(dǎo)航鉤子這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！