Vue2.x與Vue3.x中路由鉤子的區(qū)別詳解
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ū)別詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue2.x與Vue3.x中路由鉤子的區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
在Vue中實(shí)現(xiàn)二維碼生成與掃描功能的方法
二維碼是一種廣泛應(yīng)用于各種場合的編碼方式,它可以將信息編碼成一張二維圖案,方便快捷地傳遞信息,在Vue.js中,我們可以使用一些庫和組件來實(shí)現(xiàn)二維碼的生成和掃描,本文將介紹如何在Vue中實(shí)現(xiàn)二維碼的生成和掃描的方法2023-06-06關(guān)于el-table表格組件中插槽scope.row的使用方式
這篇文章主要介紹了關(guān)于el-table表格組件中插槽scope.row的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue靜態(tài)配置文件不進(jìn)行編譯的處理過程(在public中引入js)
這篇文章主要介紹了vue靜態(tài)配置文件不進(jìn)行編譯的處理過程(在public中引入js),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03Vue+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