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