vue的導航勾點有哪幾個

vue的導航勾點有3種：1、全域性守衛勾點，是指路由範例上直接操作的勾點函數，特點是所有路由設定的元件都會觸發。2、路由獨享守衛勾點，是指在單個路由設定的時候也可以設定的勾點函數，且只能在這個路由下起作用。3、區域性守衛勾點，是指在元件內執行的勾點函數，類似於陣列內的生命週期函數，相當於為設定路由的元件新增的生命週期勾點函數。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

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

導航勾點的作用

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

導航勾點的分類

• 全域性守衛
• 路由獨享守衛
• 區域性守衛

1、全域性守衛

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

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

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

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

[beforeResolve]：這個勾點和beforeEach類似，也是路由跳轉前觸發，引數也是to,from,next三個，和beforeEach區別官方解釋為：

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

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

[afterEach]：和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更新。

【相關推薦：、】

以上就是vue的導航勾點有哪幾個的詳細內容，更多請關注TW511.COM其它相關文章！