Vue2.x與Vue3.x中路由鉤子的區(qū)別是怎樣的

本篇文章給大家分享的是有關(guān)Vue2.x與Vue3.x中路由鉤子的區(qū)別是怎樣的，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

vue2.x

前置概念:

路由鉤子分類

一共分3類, 7個鉤子

路由和組件的概念(方便理解鉤子函數(shù))

路由和組件是2個概念, 可以粗獷的認(rèn)為:

• 路由是瀏覽器網(wǎng)址

• 組件是顯示在網(wǎng)頁上的不同內(nèi)容

全局路由鉤子

router.beforeEach(to, from, next){ } 前置導(dǎo)航守衛(wèi)

路由進(jìn)入前

router.afterEach(to, from, next){ } 后置導(dǎo)航守衛(wèi)

路由進(jìn)入后

router.beforeResolve(to, from, next){ } 解析守衛(wèi)

解析組件時, 已經(jīng)讀取所有配置, 前面的關(guān)卡都通過了, 準(zhǔn)備解析組件前執(zhí)行

路由配置守衛(wèi)鉤子

beforeEnter() 在讀取路由配置信息前調(diào)用

在beforeCreate()前執(zhí)行

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

組件內(nèi)的守衛(wèi)鉤子

beforeRouteEnter(to, from, next){ } 進(jìn)入組件前

默認(rèn)不能獲取組件實(shí)例 this

但是以下辦法可以訪問

beforeRouteEnter(to, from, next){ 

  // next()的回調(diào)函數(shù),在進(jìn)入路由,實(shí)例化執(zhí)行
	next(vm => {
    // vm等價于當(dāng)前組件this
  })
}

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

當(dāng)前組件依然在使用路由地址改變滿足以上2個條件才會執(zhí)行

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

路由鉤子執(zhí)行順序

eg: 從A組件跳轉(zhuǎn)到B組件順序

beforeRouteLeave() 先離開A組件

beforeEach() 全局-前置導(dǎo)航守衛(wèi)

beforeEnter() 讀取路由配置信息前 (讀取B路由信息)

beforeRouteEnter() 進(jìn)入組件前

beforeResolve() 解析守衛(wèi)

afterEach() 全局-后置導(dǎo)航守衛(wèi)

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

beforeEach() 全局 - 前置導(dǎo)航守衛(wèi)

beforeResolve() 全局 - 解析守衛(wèi)

beforeRouteUpdate() 組件內(nèi) - 修改組件前

vue3.x

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

對比變化圖

區(qū)別補(bǔ)充:

• 在Vue2.x中, 有3個組件, 如果A組件跳轉(zhuǎn)到B組件, B組件中存在子組件:
  

B組件中的子組件不會觸發(fā)路由鉤子

• 在Vue3.x中, 有3個組件, 如果A組件跳轉(zhuǎn)到B組件, B組件中存在子組件:
  

B組件中的子組件會觸發(fā)路由鉤子: onBeforeRouteUpdate和onBeforeRouteLeave
B組件中的子組件不會觸發(fā)路由鉤子

• 在Vue3.x中, 有3個組件, 如果A組件跳轉(zhuǎn)到B組件, B組件中存在子組件:
  

B組件中的子組件會觸發(fā)路由鉤子: onBeforeRouteUpdate和onBeforeRouteLeave

以上就是Vue2.x與Vue3.x中路由鉤子的區(qū)別是怎樣的，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。