Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽路由
在路由跳轉的時候,我們需要一些權限判斷或者其他操作。這個時候就需要使用路由的鉤子函數(shù)。
定義:路由鉤子主要是給使用者在路由發(fā)生變化時進行一些特殊的處理而定義的函數(shù)。
總體來講vue里面提供了三大類鉤子,兩種函數(shù) 1、全局鉤子 2、某個路由的鉤子 3、組件內(nèi)鉤子
兩種函數(shù):
1. router.beforeEach(function(to,form,next){}) /*在跳轉之前執(zhí)行*/
2. router.afterEach(function(to,form)}{}) /*在跳轉之后判斷*/
全局鉤子函數(shù)
顧名思義,它是對全局有效的一個函數(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即將進入的路由對象
// console.log("from:",from); // 當前導航即將離開的路由
// console.log("next:",next); // Function,進行管道中的一個鉤子,如果執(zhí)行完了,則導航的狀態(tài)就是 confirmed (確認的);否則為false,終止導航。
if(to.name=='notSend'){
next({
name:'sort'
})
return
}
next()
})
export default router
某個路由的鉤子函數(shù)
顧名思義,它是寫在某個路由里頭的函數(shù),本質上跟組件內(nèi)函數(shù)沒有區(qū)別。
// router.jsconst router = new VueRouter({
routes: [
{
path: '/login',
component: Login,
beforeEnter: (to, from, next) => {
// ...
},
beforeLeave: (to, from, next) => {
// ...
}
}
]
})
路由組件的鉤子
可以在路由組件內(nèi)直接定義以下路由導航鉤子
// *.vuebeforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave
這里簡單說下鉤子函數(shù)的用法:它是和data,methods平級的。
beforeRouteLeave(to, from, next) {
next()
},
beforeRouteEnter(to, from, next) {
next()
},
beforeRouteUpdate(to, from, next) { // 用于相同路由組件的的參數(shù)更新
next()
},
data:{},
method: {}
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue.js基礎指令實例講解(各種數(shù)據(jù)綁定、表單渲染大總結)
這篇文章主要為大家詳細介紹了Vue.js基礎指令實例,各種數(shù)據(jù)綁定、表單渲染大總結,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
Vue后臺管理系統(tǒng)權限控制與動態(tài)路由的實現(xiàn)
本文主要介紹了Vue后臺管理系統(tǒng)權限控制與動態(tài)路由的實現(xiàn),可以根據(jù)用戶的角色靈活控制頁面訪問權限,提高系統(tǒng)的安全性和用戶體驗,感興趣的可以了解一下2025-04-04
vue路由$router.push()使用query傳參的實際開發(fā)使用
在vue項目中我們用函數(shù)式編程this.$router.push跳轉,用query傳遞一個對象時要把這個對象先轉化為字符串,然后在接收的時候要轉化為對象,下面這篇文章主要給大家介紹了關于vue路由$router.push()使用query傳參的實際開發(fā)使用,需要的朋友可以參考下2022-11-11
解決vue-cli創(chuàng)建項目的loader問題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項目的loader問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看看吧2018-03-03
如何優(yōu)雅的在一臺vps(云主機)上面部署vue+mongodb+express項目
這篇文章主要介紹了如何優(yōu)雅的在一臺vps(云主機)上面部署vue+mongodb+express項目,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01

