vue的導航守衛都有哪些

導航守衛有：1、全域前置守衛「beforeEach」；2、全域解析守衛「beforeResolve」；3、路由獨享的守衛「beforeEnter」；4、元件內的守衛「beforeRouteEnter」、 「beforeRouteLeave」。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

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

記住參數或查詢的改變並不會觸發進入/離開的導航守衛。你可以透過觀察 $route 物件來應付這些變化，或使用 beforeRouteUpdate 的元件內守衛。

全域前置守衛

你可以使用router.beforeEach 註冊一個全域前置守衛：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

當一個導航觸發時，全域前置守衛按照創建順序調用。守衛是非同步解析執行，此時導航在所有守衛 resolve 完成之前一直處於 等待中。

每個守衛方法接收三個參數：

• to: Route: 即將要進入的目標路由物件

• from: Route: 目前導覽正要離開的路由

• next: Function: 一定要呼叫該方法來resolve 這個鉤子。執行效果依賴 next 方法的呼叫參數。

  • next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。

  • next(false): 中斷目前的導航。如果瀏覽器的 URL 改變了 (可能是使用者手動或瀏覽器後退按鈕)，那麼 URL 位址會重設到 from 路由對應的位址。

  • next('/') 或 next({ path: '/' }): 跳到一個不同的位址。目前的導航被中斷，然後進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設定諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

  • next(error): (2.4.0 ) 如果傳入next 的參數是一個Error 實例，則導航會被終止且該錯誤會傳遞給router.onError()註冊過的回調。

確保 next 函數在任何給定的導航守衛中都被嚴格地呼叫一次。它可以出現多於一次，但是只能在所有的邏輯路徑都不重疊的情況下，否則鉤子永遠不會被解析或報錯。這裡有一個在使用者未能驗證身分時重定向到/login 的範例：

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全域解析守衛

2.5.0 新增

在2.5.0 你可以用router.beforeResolve 註冊一個全域守衛。這和 router.beforeEach 類似，差異是在導航被確認之前，同時在所有元件內守衛和非同步路由元件被解析之後，解析守衛就被呼叫。

路由獨享的守衛

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

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

這些守衛與全域前守衛的方法參數是一樣的。

元件內的守衛

##最後，你可以在路由元件內直接定義以下路由導航守衛：

##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`
    }
  }

beforeRouteEnter 守衛不能存取this，因為守衛在導航確認前被調用，因此即將登場的新元件還沒被創建。

不過，你可以透過傳一個回呼給 next來存取元件實例。在導航被確認的時候執行回調，並且把元件實例當作回調方法的參數。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支援給 next 傳遞回呼的唯一守衛。對於 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支援傳遞回調，因為沒有必要了。

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

這個離開守衛通常用來禁止使用者在還未保存修改前突然離開。該導航可以透過 next(false) 來取消。

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

完整的導航解析流程

導航被觸發。
在失活的元件裡呼叫 beforeRouteLeave 守衛。
呼叫全域的 beforeEach 守衛。
在重複使用的元件裡呼叫 beforeRouteUpdate 守衛 (2.2 )。
在路由配置裡呼叫 beforeEnter。
解析非同步路由元件。
在被啟動的元件裡呼叫 beforeRouteEnter。
呼叫全域的 beforeResolve 守衛 (2.5 )。
導航被確認。
呼叫全域的 afterEach 鉤子。
觸發 DOM 更新。
呼叫 beforeRouteEnter 守衛中傳給 next 的回呼函數，建立好的元件實例會作為回呼函數的參數傳入。

【相關推薦：《vue.js教學》】

以上是vue的導航守衛都有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！