JavaScript中Vue-router有哪些鉤子和使用場景

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

Vue-router有哪些鉤子？使用場景？

router的實現可以點這里

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

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

• 全局守衛

• 路由獨享守衛

• 組件獨享守衛

全局守衛

很好理解，全局守衛就是能監聽到全局的router動作

• router.beforeEach 路由前置時觸發

const router = new VueRouter({ ... })
// to 要進入的目標路由對象
// from 當前的路由對象
// next resolve 這個鉤子，next執行效果由next方法的參數決定
// next() 進入管道中的下一個鉤子
// next(false) 中斷當前導航
// next({path}) 當前導航會中斷，跳轉到指定path
// next(error) 中斷導航且錯誤傳遞給router.onErr回調
// 確保前置守衛要調用next，否然鉤子不會進入下一個管道
router.beforeEach((to, from, next) => {
  // ...
})

• router.afterEach 路由后置時觸發

// 與前置守衛基本相同，不同是沒有next參數
router.afterEach((to, from) => {
  // ...
})

• router.beforeResolve

跟router.beforeEach類似,在所有組件內守衛及異步路由組件解析后觸發

路由獨享守衛

參數及意義同全局守衛，只是定義的位置不同

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

組件獨享守衛

組件內新一個守衛, beforeRouteUpdate,在組件可以被復用的情況下觸發，如 /demo/:id, 在/demo/1 跳轉/demo/2的時候，/demo 可以被復用，這時會觸發beforeRouteUpdate

const Demo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    ...
  },
  // 在當前路由改變，但是該組件被復用時調用
  beforeRouteUpdate (to, from, next) {
    ...
  },
  beforeRouteLeave (to, from, next) {
    ...
  }
}

• 注意在beforeRouteEnter前不能拿到當前組件的this，因為組件還有被創建，我們可以通過next(vm => {console.log(vm)}) 回傳當前組件的this進行一些邏輯操作

使用場景

路由進入前最典型的可以做一些權限控制, 路由離開時清除或存儲一些信息,任務等等

總結

vue-router中鉤子分為全局的，局部的，以及組件三種形式, 他們都有前置守衛以及后置守衛, 其中組件的前置守衛不能拿到當前組件的this，因組件還沒有被創建，可以通過next的參數進行回傳this，前置守衛必須調用next方法，否則不會進入下一個管

以上是“JavaScript中Vue-router有哪些鉤子和使用場景”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！