深入淺析Vue-Router中的導航鉤子

這篇文章帶大家了解一下面試必問的事物---V​​ue-Router中的導航鉤子，希望多大家有幫助！

導航守衛

「導航」表示路由正在改變。

vue-router 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單一路由獨享的, 或組件級的。 【相關推薦：《vue.js教學》】

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中的導航鉤子的詳細內容。更多資訊請關注PHP中文網其他相關文章！