Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽路由
在路由跳轉(zhuǎn)的時候,我們需要一些權(quán)限判斷或者其他操作。這個時候就需要使用路由的鉤子函數(shù)。
定義:路由鉤子主要是給使用者在路由發(fā)生變化時進行一些特殊的處理而定義的函數(shù)。
總體來講vue里面提供了三大類鉤子,兩種函數(shù) 1、全局鉤子 2、某個路由的鉤子 3、組件內(nèi)鉤子
兩種函數(shù):
1. router.beforeEach(function(to,form,next){}) /*在跳轉(zhuǎn)之前執(zhí)行*/
2. router.afterEach(function(to,form)}{}) /*在跳轉(zhuǎn)之后判斷*/
全局鉤子函數(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ù),本質(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)直接定義以下路由導航鉤子
// *.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ù)綁定、表單渲染大總結(jié))
這篇文章主要為大家詳細介紹了Vue.js基礎指令實例,各種數(shù)據(jù)綁定、表單渲染大總結(jié),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07Vue后臺管理系統(tǒng)權(quán)限控制與動態(tài)路由的實現(xiàn)
本文主要介紹了Vue后臺管理系統(tǒng)權(quán)限控制與動態(tài)路由的實現(xiàn),可以根據(jù)用戶的角色靈活控制頁面訪問權(quán)限,提高系統(tǒng)的安全性和用戶體驗,感興趣的可以了解一下2025-04-04vue路由$router.push()使用query傳參的實際開發(fā)使用
在vue項目中我們用函數(shù)式編程this.$router.push跳轉(zhuǎn),用query傳遞一個對象時要把這個對象先轉(zhuǎn)化為字符串,然后在接收的時候要轉(zhuǎn)化為對象,下面這篇文章主要給大家介紹了關于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