欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue2.x與Vue3.x中路由鉤子的區(qū)別詳解

 更新時(shí)間:2021年09月24日 09:55:28   作者:SpringSir  
這篇文章主要介紹了Vue2.x與Vue3.x中路由鉤子的區(qū)別,分別介紹了路由鉤子的分類,路由配置守衛(wèi)鉤子以及組件內(nèi)守衛(wèi)鉤子等有需要的朋友可以借鑒參考下

vue2.x

前置概念:

路由鉤子分類

一共分3類, 7個(gè)鉤子

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

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

  • 路由是瀏覽器網(wǎng)址
  • 組件是顯示在網(wǎng)頁(yè)上的不同內(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)

 

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

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

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-iNt9TxY9-1631622860323)(C:\Users\hwm\AppData\Roaming\Typora\typora-user-images\image-20210914193901604.png)]

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

但是以下辦法可以訪問(wèn)

beforeRouteEnter(to, from, next){ 

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

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

當(dāng)前組件依然在使用路由地址改變滿足以上2個(gè)條件才會(huì)執(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路有更新, 每次都會(huì)執(zhí)行以下三個(gè)鉤子:

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

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

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

vue3.x

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

對(duì)比變化圖

請(qǐng)?zhí)砑訄D片描述

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

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

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

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

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

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

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

以上就是Vue2.x與Vue3.x中路由鉤子的區(qū)別詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue2.x與Vue3.x中路由鉤子的區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 在Vue中實(shí)現(xiàn)二維碼生成與掃描功能的方法

    在Vue中實(shí)現(xiàn)二維碼生成與掃描功能的方法

    二維碼是一種廣泛應(yīng)用于各種場(chǎng)合的編碼方式,它可以將信息編碼成一張二維圖案,方便快捷地傳遞信息,在Vue.js中,我們可以使用一些庫(kù)和組件來(lái)實(shí)現(xiàn)二維碼的生成和掃描,本文將介紹如何在Vue中實(shí)現(xiàn)二維碼的生成和掃描的方法
    2023-06-06
  • Vue 組件參數(shù)校驗(yàn)與非props特性的方法

    Vue 組件參數(shù)校驗(yàn)與非props特性的方法

    這篇文章主要介紹了Vue 組件參數(shù)校驗(yàn)與非props特性的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-02-02
  • Vue具名插槽+作用域插槽的混合使用方法

    Vue具名插槽+作用域插槽的混合使用方法

    這篇文章主要介紹了Vue具名插槽+作用域插槽的混合使用,這里只簡(jiǎn)單的介紹?具名插槽+作用域插槽?混合在一起使用的方法,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • vue從使用到源碼實(shí)現(xiàn)教程詳解

    vue從使用到源碼實(shí)現(xiàn)教程詳解

    這篇文章主要介紹了vue從使用到源碼實(shí)現(xiàn)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-09-09
  • vue3封裝Notification組件的完整步驟記錄

    vue3封裝Notification組件的完整步驟記錄

    在我們使用vue的開發(fā)過(guò)程中總會(huì)遇到這樣的場(chǎng)景,封裝自己的業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于vue3封裝Notification組件的完整步驟,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-03-03
  • 關(guān)于el-table表格組件中插槽scope.row的使用方式

    關(guān)于el-table表格組件中插槽scope.row的使用方式

    這篇文章主要介紹了關(guān)于el-table表格組件中插槽scope.row的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 優(yōu)雅地使用loading(推薦)

    優(yōu)雅地使用loading(推薦)

    這篇文章主要介紹了在Vue和React中如何優(yōu)雅地使用loading,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue靜態(tài)配置文件不進(jìn)行編譯的處理過(guò)程(在public中引入js)

    vue靜態(tài)配置文件不進(jìn)行編譯的處理過(guò)程(在public中引入js)

    這篇文章主要介紹了vue靜態(tài)配置文件不進(jìn)行編譯的處理過(guò)程(在public中引入js),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能實(shí)例

    Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能實(shí)例

    這篇文章主要給大家介紹了關(guān)于Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能的相關(guān)資料,element-UI表格的使用相信大家都不陌生,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
    2023-07-07
  • Vue3基礎(chǔ)安裝以及配置詳解

    Vue3基礎(chǔ)安裝以及配置詳解

    這篇文章主要介紹了Vue3基礎(chǔ)安裝以及配置詳解,需要的朋友可以參考下
    2023-01-01

最新評(píng)論