Vuerouter的beforeEach與afterEach鉤子函數的區別

在路由跳轉的時候,我們需要一些權限判斷或者其他操作。這個時候就需要使用路由的鉤子函數。

定義:路由鉤子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的函數。

總體來講vue裏面提供了三大類鉤子,兩種函數

1、全局鉤子
2、某個路由的鉤子
3、組件內鉤子

兩種函數:

1、Vue.beforeEach(function(to,form,next){}) /在跳轉之前執行/

2.Vue.afterEach(function(to,form))/在跳轉之後判斷/

全局鉤子函數

顧名思義,它是對全局有效的一個函數

router.beforeEach((to, from, next) => {
 
  let token = router.app.$storage.fetch("token");
 
  let needAuth = to.matched.some(item => item.meta.login);
 
  if(!token && needAuth) return next({path: "/login"});
 
  next();
 
}); 

beforeEach函數有三個參數:

  • to:router即將進入的路由對象
  • from:當前導航即將離開的路由
  • next:Function,進行管道中的一個鉤子,如果執行完了,則導航的狀態就是 confirmed (確認的);否則爲false,終止導航。

afterEach函數不用傳next()函數

某個路由的鉤子函數

顧名思義,它是寫在某個路由裏頭的函數,本質上跟組件內函數沒有區別。

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

路由組件的鉤子

注意:這裏說的是路由組件!

路由組件 屬於 組件,但組件 不等同於 路由組件!所謂的路由組件:直接定義在router中component處的組件。如:

var routes = [
  {
  path:'/home',
  component:home,
  name:"home"
  }
]

在子組件中調用路由的鉤子函數時無效的。

在官方文檔上是這樣定義的:

可以在路由組件內直接定義以下路由導航鉤子

  • beforeRouteEnter
  • beforeRouteUpdate (2.2 新增)
  • beforeRouteLeave

這裏簡單說下鉤子函數的用法:它是和data,methods平級的。

beforeRouteLeave(to, from, next) {
  next()
},
beforeRouteEnter(to, from, next) {
  next()
},
beforeRouteUpdate(to, from, next) {
  next()
},
data:{},
method: {}

PS:在使用vue-router beforeEach鉤子時,你也許會遇到如下問題:

源碼:

router.beforeEach((to, from, next) => {
//判斷登錄狀態簡單實例
var userInfo = window.localStorage.getItem('token');
if (userInfo) {
next();
} else {
next('/login');
}
})

然後你會發現出現如下錯誤:出現dead loop錯誤



解決方案:

router.beforeEach((to, from, next) => {
var userInfo = window.localStorage.getItem('token');//獲取瀏覽器緩存的用戶信息
if(userInfo){ //如果有就直接到首頁咯
next();
} else {
if(to.path=='/login'){ //如果是登錄頁面路徑,就直接next()
next();
} else { //不然就跳轉到登錄;
next('/login');
}
 
}
})

解決思路:

排除此時地址 = 轉向的地址 的情況,避免dead loop, 問題很簡單,但一不小心就入坑了

最後

爲了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成爲全棧工程師,乃至架構師的路上披荊斬棘。在這裏給大家推薦一個前端全棧學習交流圈:866109386.歡迎大家進羣交流討論,學習交流,共同進步。

當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程序員們,祝福大家在往後的工作與面試中一切順利。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章