快捷導(dǎo)航

Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽(tīng)路由

更新時(shí)間：2020年11月16日 10:09:09 作者：ddr66288

這篇文章主要介紹了Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽(tīng)路由,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

在路由跳轉(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. router.beforeEach(function(to,form,next){}) /*在跳轉(zhuǎn)之前執(zhí)行*/

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

全局鉤子函數(shù)

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

// router.jsconst router = new Router({
 routes: [
  {
   path: '/',
   name: 'sideBar',
   component: sideBar,
   children:[
    {
     path:'/',
     name:'sort',
     component:sort
    },
    {
     path:'/addNewSort',
     name:'addNewSort',
     component:addNewSort
    },
    {
     path:'/notSend',
     name:'notSend',
     component:notSend
    },
    {
     path:'/sended',
     name:'sended',
     component:sended
    },
  }
 ]
})

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

export default router

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

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

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

路由組件的鉤子

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

// *.vuebeforeRouteEnter
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) { // 用于相同路由組件的的參數(shù)更新
  next()
},
data:{},
method: {}

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

您可能感興趣的文章: