這篇文章主要介紹JavaScript中Vue-router有哪些鉤子和使用場(chǎng)景，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)嘉蔭免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Vue-router有哪些鉤子？使用場(chǎng)景？

router的實(shí)現(xiàn)可以點(diǎn)這里

前面我們用大白話講過什么是鉤子，這里在重復(fù)一下，就是在什么什么之前,什么什么之后,英文叫hooks,專業(yè)點(diǎn)叫生命周期，裝逼點(diǎn)可以叫守衛(wèi)...

vue-router中也存在鉤子的概念,分為三步記憶

• 全局守衛(wèi)

• 路由獨(dú)享守衛(wèi)

• 組件獨(dú)享守衛(wèi)

全局守衛(wèi)

很好理解，全局守衛(wèi)就是能監(jiān)聽到全局的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)基本相同，不同是沒有next參數(shù)
router.afterEach((to, from) => {
  // ...
})

• router.beforeResolve

跟router.beforeEach類似,在所有組件內(nèi)守衛(wèi)及異步路由組件解析后觸發(fā)

路由獨(dú)享守衛(wèi)

參數(shù)及意義同全局守衛(wèi)，只是定義的位置不同

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

組件獨(dú)享守衛(wèi)

組件內(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)建，我們可以通過next(vm => {console.log(vm)}) 回傳當(dāng)前組件的this進(jìn)行一些邏輯操作

使用場(chǎng)景

路由進(jìn)入前最典型的可以做一些權(quán)限控制, 路由離開時(shí)清除或存儲(chǔ)一些信息,任務(wù)等等

總結(jié)

vue-router中鉤子分為全局的，局部的，以及組件三種形式, 他們都有前置守衛(wèi)以及后置守衛(wèi), 其中組件的前置守衛(wèi)不能拿到當(dāng)前組件的this，因組件還沒有被創(chuàng)建，可以通過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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：JavaScript中Vue-router有哪些鉤子和使用場(chǎng)景
網(wǎng)址分享：http://www.chinadenli.net/article0/jigdoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、做網(wǎng)站、網(wǎng)站維護(hù)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)