JS每日一題：Vue-router有哪些鉤子？使用場景？

20190218問

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方法，不然不會進入下一個管道

關於JS每日一題

JS每日一題能夠當作是一個語音答題社區
天天利用碎片時間採用60秒內的語音形式來完成當天的考題
羣主在第二天0點推送當天的參考答案

• 注 毫不僅限於完成當天任務，更可能是查漏補缺，學習羣內其它同窗優秀的答題思路

點擊加入答題