目錄

• 2.x
• 前置概念:
• 路由鉤子分類
• 路由和元件的概念(方便理解鉤子函式)
• 全域性路由鉤子
• 路由配置守衛鉤子
• 元件內的守衛鉤子
• 路由鉤子執行順序
• eg: 從A元件跳轉到B元件順序
• 如果B路有更新,每次都會執行以下三個鉤子:
• vue3.x
• 對比變化圖
• 區別補充:

vue2.x

前置概念:

路由鉤子分類

一共分3類,7個鉤子

路由和元件的概念(方便理解鉤子函式)

路由和元件是2個概念,可以粗獷的認為:

• 路由是瀏覽器網址
• 組www.cppcns.com件是顯示在上的不同內容

全域性路由鉤子

router.beforeEach(to,from,next){ } 前置導航守衛

路由進入前

router.afterEach(to,next){ } 後置導航守衛

路由進入後

router.beforeResolve(to,next){ } 解析守衛

解析元件時,已經讀取所有配置,前面的關卡都通過了,準備解析元件前執行

路由配置守衛鉤子

beforeEnter() 在讀取路由配置資訊前呼叫

在beforeCreate()前執行

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

元件內的守衛鉤子

beforeRouteEnter(to,next){ } 進入元件前

預設不能獲取元件例項 this

但是以下辦法可以訪問

beforeRouteEnter(to,next){ 

  // next()的回撥函式,在進入路由,例項化執行
	next(vm => {
    // vm等價於當前元件this
  })
}

beforeRouteUpdate(to,next){ } 修改元件前

當前元件依然在使用路由地址改變滿足以上2個條件才會執行

beforeRouteLeave(to,next){ } 離開元件前

路由鉤子執行順序

eg: 從A元件跳轉到B元件順序

beforeRouteLeave() 先離開A元件

beforeEach() 全域性-前置導航守衛

beforeEnter() 讀取路由配置資訊前 (讀取B路由資訊)

beforeRouteEnter() 進入元件前

beforwww.cppcns.comeResolve() 解析守衛

afterEach() 全域性-後置導航守衛

如果B路有更新,每次都會執行以下三個鉤子:

beforeEach() 全域性 - 前置導航守衛

beforeResolve() 全域性 - 解析守衛

beforeRouteUpdazFZqute() 元件內 - 修改元件前

vue3.x

vue3.x相對於vue2.x,只有小部分不同,此處只針對不同做講解

對比變化圖

區別補充:

• 在Vue2.x中,有3個元件,如果A元件跳轉到B元件,B元件中存在子元件:
  

B元件中的子元件不會觸發路由鉤子

• 在Vue3.x中,B元件中存在子元件:
  

B元件中的子元件會觸發路由鉤子: onBeforeRouteUpdate和onBeforeRouteLeave
B元件中的子元件不會觸發路由鉤子

• 在Vue3.x中,B元件中存在子元件:
  

B元件中的子元件會觸發路由鉤子: onBeforeRouteUpdate和onBeforeRouteLeave

以上就是Vue2.x與Vue3.x中路由鉤子的區別詳解的詳細內容，更多關於Vue2.x與Vue3.x中路由鉤子的區別的資料請關注我們其它相關文章！