Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽路由
在路由跳轉(zhuǎn)的時(shí)候，我們需要一些權(quán)限判斷或者其他操作。這個(gè)時(shí)候就需要使用路由的鉤子函數(shù)。
定義：路由鉤子主要是給使用者在路由發(fā)生變化時(shí)進(jìn)行一些特殊的處理而定義的函數(shù)。
總體來講vue里面提供了三大類鉤子，兩種函數(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)航即將離開的路由
// 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ù)
顧名思義，它是寫在某個(gè)路由里頭的函數(shù)，本質(zhì)上跟組件內(nèi)函數(shù)沒有區(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)單說下鉤子函數(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js基礎(chǔ)指令實(shí)例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
這篇文章主要為大家詳細(xì)介紹了Vue.js基礎(chǔ)指令實(shí)例，各種數(shù)據(jù)綁定、表單渲染大總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue面包屑組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue后臺(tái)管理系統(tǒng)權(quán)限控制與動(dòng)態(tài)路由的實(shí)現(xiàn)
本文主要介紹了Vue后臺(tái)管理系統(tǒng)權(quán)限控制與動(dòng)態(tài)路由的實(shí)現(xiàn),可以根據(jù)用戶的角色靈活控制頁面訪問權(quán)限,提高系統(tǒng)的安全性和用戶體驗(yàn),感興趣的可以了解一下2025-04-04
插槽slot可以說在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫的時(shí)候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2023-01-01
v-for中動(dòng)態(tài)校驗(yàn)el-form表單項(xiàng)的實(shí)踐
在項(xiàng)目開發(fā)中，我們經(jīng)常會(huì)遇到表單保存的功能，本文主要介紹了v-for中動(dòng)態(tài)校驗(yàn)el-form表單項(xiàng)的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-05-05
如何在Vue.js中實(shí)現(xiàn)標(biāo)簽頁組件詳解
這篇文章主要給大家介紹了關(guān)于如何在Vue.js中實(shí)現(xiàn)標(biāo)簽頁組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
vue路由$router.push()使用query傳參的實(shí)際開發(fā)使用
在vue項(xiàng)目中我們用函數(shù)式編程this.$router.push跳轉(zhuǎn),用query傳遞一個(gè)對(duì)象時(shí)要把這個(gè)對(duì)象先轉(zhuǎn)化為字符串,然后在接收的時(shí)候要轉(zhuǎn)化為對(duì)象,下面這篇文章主要給大家介紹了關(guān)于vue路由$router.push()使用query傳參的實(shí)際開發(fā)使用,需要的朋友可以參考下2022-11-11
解決vue-cli創(chuàng)建項(xiàng)目的loader問題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項(xiàng)目的loader問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看看吧2018-03-03
這篇文章主要介紹了vue 動(dòng)態(tài)生成拓?fù)鋱D的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
如何優(yōu)雅的在一臺(tái)vps（云主機(jī)）上面部署vue+mongodb+express項(xiàng)目
這篇文章主要介紹了如何優(yōu)雅的在一臺(tái)vps（云主機(jī)）上面部署vue+mongodb+express項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01