vue的導航鉤子有哪幾個

vue的導覽鉤子有3種：1、全域守衛鉤子，是指路由範例上直接操作的鉤子函數，特點是所有路由配置的元件都會觸發。 2.路由獨享守衛鉤子，是指在單一路由配置的時候也可以設定的鉤子函數，且只能在這個路由下運作。 3.局部守衛鉤子，是指在元件內執行的鉤子函數，類似於陣列內的生命週期函數，相當於為配置路由的元件添加的生命週期鉤子函數。

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

導航鉤子的作用

• #vue-router提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。

導航鉤子的分類

• 全域守衛
• 路由獨享受守衛
• 局部守衛

#1、全域守衛

是指在路由範例上直接操作的鉤子函數，特點是所有路由配置的元件都會觸發。簡單點說就是觸發路由就會觸發這些鉤子函數。鉤子函數執行順序包括beforeEach、beforeResolve、afterEach三個。

<strong>[beforeEach]</strong>：在路由跳轉前觸發，參數包括to,from,next三個，這個鉤子作用主要是用於登入驗證，也就是路由還沒跳轉提前告知，以免跳轉了再通知就為時已晚。

 router.beforeEach  router.beforeResolve  router.afterEach
    const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });

• to：代表要進入的目標，它是一個路由物件
• from：代表目前正要離開的路由，同樣也是一個路由物件
• next：這是一個必須需要呼叫的方法，而具體的執行效果則依賴next方法呼叫的參數

<strong>[beforeResolve]</strong> ：這個鉤子和beforeEach類似，也是路由跳轉前觸發，參數也是to,from,next三個，和beforeEach區別官方解釋為：

 區別是在導航被確認之前，同時在所有元件內守衛和非同步路由元件被解析之後，解析守衛就會被呼叫。

即在beforeEach和元件內beforeRouteEnter之後，afterEach之後，afterEach之前呼叫。

<strong>[afterEach]</strong>：和beforeEach相反，它是在路由跳轉完成之後觸發，參數包括to、from，沒有了next，它發生在beforeEach和beforeResolve之後，beforeRouteEnter(足跡按內守衛)之前。

 const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });
  //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身
    router.afterEach((to, from) => {
        // do someting
    });

2、路由獨享守衛

是指在單一路由配置的時候也可以設定的鉤子函數，並且只能在這個路由下運作。其位置如下，也就是像File這樣的元件都存在這樣的鉤子函數。目前它只有一個鉤子函數beforeEnter。

[beforeEnter]#：和beforeEach完全相同，如果都設定則在beforeEach之後緊接著執行，參數有to、from、 next。

  cont router = new VueRouter({
        routes: [
            {
                path: '/file',
                component: File,
                beforeEnter: (to, from ,next) => {
                    // do someting
                }
            }
        ]
    });

3、局部守衛

#是指在元件內執行的鉤子函數，類似陣列內的生命週期函數，相當於為配置路由的元件新增的生命週期鉤子函數。鉤子函數依執行順序包括beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave三個，執行位置如下：

 const File = {
        template: `<div>This is file</div>`,
        beforeRouteEnter(to, from, next) {
            // do someting
            // 在渲染该组件的对应路由被 confirm 前调用
        },
        beforeRouteUpdate(to, from, next) {
            // do someting
            // 在当前路由改变，但是依然渲染该组件是调用
        },
        beforeRouteLeave(to, from ,next) {
            // do someting
            // 导航离开该组件的对应路由时被调用
        }
    }

#路由跳轉導航流程，當由A路由–>B路由的時候

1、在A元件裡呼叫離開守衛。 A元件中的beforeRouterLeave

2、呼叫全域的beforeEach守衛。 router.beforeEach

3、再執行B路由配置裡呼叫beforeEnter。

routes:[
      {
          path:'/b',
          component:B,
          beforeEnter:(to,form,next)=>{
             ..... 
          }
      }
  ]

4、再執行B元件的進入守衛。 B元件中beforeRouterEnter

5、呼叫全域的beforeResolve守衛(2.5 )。 router.beforeResolve

6、導航被確認。

7、呼叫全域的afterEach鉤子。 router.afterEach

8、觸發DOM更新。

【相關推薦：vuejs影片教學、web前端開發】

以上是vue的導航鉤子有哪幾個的詳細內容。更多資訊請關注PHP中文網其他相關文章！