您好,登錄后才能下訂單哦!
這篇文章主要介紹JavaScript中Vue-router有哪些鉤子和使用場(chǎng)景,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
Vue-router有哪些鉤子?使用場(chǎng)景?
router的實(shí)現(xiàn)可以點(diǎn)這里
前面我們用大白話講過(guò)什么是鉤子,這里在重復(fù)一下,就是在什么什么之前,什么什么之后,英文叫hooks,專業(yè)點(diǎn)叫生命周期,裝逼點(diǎn)可以叫守衛(wèi)...
vue-router中也存在鉤子的概念,分為三步記憶
全局守衛(wèi)
路由獨(dú)享守衛(wèi)
組件獨(dú)享守衛(wèi)
很好理解,全局守衛(wèi)就是能監(jiān)聽(tīng)到全局的router動(dòng)作
router.beforeEach 路由前置時(shí)觸發(fā)
const router = new VueRouter({ ... }) // to 要進(jìn)入的目標(biāo)路由對(duì)象 // from 當(dāng)前的路由對(duì)象 // next resolve 這個(gè)鉤子,next執(zhí)行效果由next方法的參數(shù)決定 // next() 進(jìn)入管道中的下一個(gè)鉤子 // next(false) 中斷當(dāng)前導(dǎo)航 // next({path}) 當(dāng)前導(dǎo)航會(huì)中斷,跳轉(zhuǎn)到指定path // next(error) 中斷導(dǎo)航且錯(cuò)誤傳遞給router.onErr回調(diào) // 確保前置守衛(wèi)要調(diào)用next,否然鉤子不會(huì)進(jìn)入下一個(gè)管道 router.beforeEach((to, from, next) => { // ... })
router.afterEach 路由后置時(shí)觸發(fā)
// 與前置守衛(wèi)基本相同,不同是沒(méi)有next參數(shù) router.afterEach((to, from) => { // ... })
router.beforeResolve
跟router.beforeEach類似,在所有組件內(nèi)守衛(wèi)及異步路由組件解析后觸發(fā)
參數(shù)及意義同全局守衛(wèi),只是定義的位置不同
const router = new VueRouter({ routes: [ { path: '/', component: Demo, beforeEnter: (to, from, next) => { // ... }, afterEnter: (to, from, next) => { // ... }, } ] })
組件內(nèi)新一個(gè)守衛(wèi), beforeRouteUpdate,在組件可以被復(fù)用的情況下觸發(fā),如 /demo/:id, 在/demo/1 跳轉(zhuǎn)/demo/2的時(shí)候,/demo 可以被復(fù)用,這時(shí)會(huì)觸發(fā)beforeRouteUpdate
const Demo = { template: `...`, beforeRouteEnter (to, from, next) { ... }, // 在當(dāng)前路由改變,但是該組件被復(fù)用時(shí)調(diào)用 beforeRouteUpdate (to, from, next) { ... }, beforeRouteLeave (to, from, next) { ... } }
注意在beforeRouteEnter前不能拿到當(dāng)前組件的this,因?yàn)榻M件還有被創(chuàng)建,我們可以通過(guò)next(vm => {console.log(vm)}) 回傳當(dāng)前組件的this進(jìn)行一些邏輯操作
路由進(jìn)入前最典型的可以做一些權(quán)限控制, 路由離開(kāi)時(shí)清除或存儲(chǔ)一些信息,任務(wù)等等
vue-router中鉤子分為全局的,局部的,以及組件三種形式, 他們都有前置守衛(wèi)以及后置守衛(wèi), 其中組件的前置守衛(wèi)不能拿到當(dāng)前組件的this,因組件還沒(méi)有被創(chuàng)建,可以通過(guò)next的參數(shù)進(jìn)行回傳this,前置守衛(wèi)必須調(diào)用next方法,否則不會(huì)進(jìn)入下一個(gè)管
以上是“JavaScript中Vue-router有哪些鉤子和使用場(chǎng)景”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。