您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue3中的路由守衛(wèi)怎么使用”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“vue3中的路由守衛(wèi)怎么使用”文章能幫助大家解決問題。
路由守衛(wèi)(導航守衛(wèi))分為三種:全局守衛(wèi)(3個)、路由獨享守衛(wèi)(1個)、組件的守衛(wèi)(3個)
to:要跳轉(zhuǎn)到的目標路由
from:從當前哪個路由進行跳轉(zhuǎn)
next:不做任何阻攔,直接通行
注意: 必須要確保 next函數(shù) 在任何給定的導航守衛(wèi)中都被調(diào)用過一次。它可以出現(xiàn)多次,但是只能在所有的邏輯路徑都不重疊的情況下,否則會報錯。
案例:
router.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next() })
全局路由守衛(wèi)有三個:全局前置守衛(wèi),全局后置守衛(wèi),全局解析守衛(wèi)
全局前置守衛(wèi)
1.使用方式:main.js中配置,在路由跳轉(zhuǎn)前觸發(fā),這個鉤子作用主要是用于登錄驗證,也就是路由還沒跳轉(zhuǎn)提前告知,以免跳轉(zhuǎn)了再通知就為時已晚
2.代碼:
router.beforeEach((to,from,next)=>{})
3.例子:做登錄判斷
router.beforeEach((to,from,next)=>{ if(to.path == '/login' || to.path == '/register'){ next(); }else{ alert('您還沒有登錄,請先登錄'); next('/login'); } })
全局后置守衛(wèi)
1.使用方式:main.js中配置,和beforeEach相反,它是在路由跳轉(zhuǎn)完成后觸發(fā),它發(fā)生在beforeEach和beforeResolve之后,beforeRouteEnter(組件內(nèi)守衛(wèi))之前。鉤子不會接受next函數(shù)也不會改變導航本身
2.代碼:
router.afterEach((to,from)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})
全局解析守衛(wèi)
1.使用方式:main.js中配置,這個鉤子和beforeEach類似,也是路由跳轉(zhuǎn)前觸發(fā),區(qū)別是在導航被確認之前,同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后,即在 beforeEach 和 組件內(nèi)beforeRouteEnter 之后,afterEach之前調(diào)用。
2.代碼:
router.beforeResolve((to,from,next)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})
組件內(nèi)守衛(wèi)有個三個:路由進入之前beforeRouteEnter,路由離開時beforeRouteLeave,頁面更新時beforeRouteUpdate
beforeRouteEnter(to, from, next)
1.使用方式:在組件模板中使用,跟methods: {}等同級別書寫,組件路由守衛(wèi)是寫在每個單獨的vue文件里面的路由守衛(wèi)
2.代碼:
beforeRouteEnter(to, from, next) { // 在組件生命周期beforeCreate階段觸發(fā) console.log('組件內(nèi)路由前置守衛(wèi) beforeRouteEnter', this) // 訪問不到this next((vm) => { console.log('組件內(nèi)路由前置守衛(wèi) vm', vm) // vm 就是this }) },
beforeRouteUpdate(to, from, next)
1.使用方式:在組件模板中使用,跟methods: {}等同級別書寫,組件路由守衛(wèi)是寫在每個單獨的vue文件里面的路由守衛(wèi)
2.代碼:
beforeRouteUpdate (to, from, next) { // 同一頁面,刷新不同數(shù)據(jù)時調(diào)用, // 可以訪問組件實例 }
beforeRouteLeave(to, from, next)
1.使用方式:在組件模板中使用,跟methods: {}等同級別書寫,組件路由守衛(wèi)是寫在每個單獨的vue文件里面的路由守衛(wèi)
2.代碼:
beforeRouteLeave (to, from, next) { // 導航離開該組件的對應路由時調(diào)用 // 可以訪問組件實例 }
路由獨享守衛(wèi)只有一個:進入路由時觸發(fā)beforeEnter
路由獨享守衛(wèi) beforeEnter(to, from, next)
1.使用方式:在router.js中使用,路由獨享守衛(wèi)是在路由配置頁面單獨給路由配置的一個守衛(wèi)
2.代碼
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
1.觸發(fā)進入其它路由
2.調(diào)用要離開路由的組件守衛(wèi)beforeRouteLeave
3.調(diào)用全局的前置守衛(wèi)beforeEach
4.在重用的組件里調(diào)用 beforeRouteUpdate
5.在路由配置里的單條路由調(diào)用 beforeEnter
6.解析異步路由組件
7.在將要進入的路由組件中調(diào)用beforeRouteEnter
8.調(diào)用全局的解析守衛(wèi)beforeResolve
9.導航被確認
10.調(diào)用全局的后置鉤子afterEach
11.觸發(fā) DOM 更新mounted
12.執(zhí)行beforeRouteEnter守衛(wèi)中傳給 next的回調(diào)函數(shù)
關于“vue3中的路由守衛(wèi)怎么使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識,可以關注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。