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有哪些鉤子及應用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！