快捷導(dǎo)航

Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別

更新時(shí)間：2018年12月26日 14:44:11 作者：Clancey

本文詳細(xì)的介紹了Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別和使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在路由跳轉(zhuǎn)的時(shí)候，我們需要一些權(quán)限判斷或者其他操作。這個(gè)時(shí)候就需要使用路由的鉤子函數(shù)。

定義：路由鉤子主要是給使用者在路由發(fā)生變化時(shí)進(jìn)行一些特殊的處理而定義的函數(shù)。

總體來(lái)講vue里面提供了三大類(lèi)鉤子，兩種函數(shù)
1、全局鉤子
2、某個(gè)路由的鉤子
3、組件內(nèi)鉤子

兩種函數(shù)：

1、Vue.beforeEach(function(to,form,next){}) /*在跳轉(zhuǎn)之前執(zhí)行*/

2.Vue.afterEach(function(to,form))/*在跳轉(zhuǎn)之后判斷*/

全局鉤子函數(shù)

顧名思義，它是對(duì)全局有效的一個(gè)函數(shù)

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函數(shù)有三個(gè)參數(shù)：

to:router即將進(jìn)入的路由對(duì)象
from:當(dāng)前導(dǎo)航即將離開(kāi)的路由
next:Function,進(jìn)行管道中的一個(gè)鉤子，如果執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）；否則為false，終止導(dǎo)航。

afterEach函數(shù)不用傳next()函數(shù)

某個(gè)路由的鉤子函數(shù)

顧名思義，它是寫(xiě)在某個(gè)路由里頭的函數(shù)，本質(zhì)上跟組件內(nèi)函數(shù)沒(méi)有區(qū)別。

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

路由組件的鉤子

注意：這里說(shuō)的是路由組件！

路由組件屬于組件，但組件不等同于路由組件！所謂的路由組件：直接定義在router中component處的組件。如：

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

在子組件中調(diào)用路由的鉤子函數(shù)時(shí)無(wú)效的。

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

可以在路由組件內(nèi)直接定義以下路由導(dǎo)航鉤子

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

這里簡(jiǎn)單說(shuō)下鉤子函數(shù)的用法：它是和data,methods平級(jí)的。

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

PS:在使用vue-router beforeEach鉤子時(shí)，你也許會(huì)遇到如下問(wèn)題：

源碼：

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

然后你會(huì)發(fā)現(xiàn)出現(xiàn)如下錯(cuò)誤：出現(xiàn)dead loop錯(cuò)誤

解決方案：

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

}
})

解決思路：

排除此時(shí)地址 = 轉(zhuǎn)向的地址的情況，避免dead loop, 問(wèn)題很簡(jiǎn)單，但一不小心就入坑了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: