vue3中7種路由守衛(wèi)的使用大全舉例
路由守衛(wèi)有哪幾種?
路由守衛(wèi)(導(dǎo)航守衛(wèi))分為三種:全局守衛(wèi)(3個(gè))、路由獨(dú)享守衛(wèi)(1個(gè))、組件的守衛(wèi)(3個(gè))
路由守衛(wèi)的三個(gè)參數(shù)
to:要跳轉(zhuǎn)到的目標(biāo)路由
from:從當(dāng)前哪個(gè)路由進(jìn)行跳轉(zhuǎn)
next:不做任何阻攔,直接通行
注意: 必須要確保 next函數(shù) 在任何給定的導(dǎo)航守衛(wèi)中都被調(diào)用過一次。它可以出現(xiàn)多次,但是只能在所有的邏輯路徑都不重疊的情況下,否則會(huì)報(bào)錯(cuò)。
案例:
router.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next() })
一、全局路由守衛(wèi)
全局路由守衛(wèi)有三個(gè):全局前置守衛(wèi),全局后置守衛(wèi),全局解析守衛(wèi)
全局前置守衛(wèi)
1.使用方式:main.js中配置,在路由跳轉(zhuǎn)前觸發(fā),這個(gè)鉤子作用主要是用于登錄驗(yàn)證,也就是路由還沒跳轉(zhuǎn)提前告知,以免跳轉(zhuǎn)了再通知就為時(shí)已晚
2.代碼:
router.beforeEach((to,from,next)=>{})
3.例子:做登錄判斷
router.beforeEach((to,from,next)=>{ if(to.path == '/login' || to.path == '/register'){ next(); }else{ alert('您還沒有登錄,請(qǐng)先登錄'); next('/login'); } })
全局后置守衛(wèi)
1.使用方式:main.js中配置,和beforeEach相反,它是在路由跳轉(zhuǎn)完成后觸發(fā),它發(fā)生在beforeEach和beforeResolve之后,beforeRouteEnter(組件內(nèi)守衛(wèi))之前。鉤子不會(huì)接受next函數(shù)也不會(huì)改變導(dǎo)航本身
2.代碼:
router.afterEach((to,from)=>{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->})
全局解析守衛(wèi)
1.使用方式:main.js中配置,這個(gè)鉤子和beforeEach類似,也是路由跳轉(zhuǎn)前觸發(fā),區(qū)別是在導(dǎo)航被確認(rèn)之前,同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后,即在 beforeEach 和 組件內(nèi)beforeRouteEnter 之后,afterEach之前調(diào)用。
2.代碼:
router.beforeResolve((to,from,next)=>{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->})
一、組件內(nèi)守衛(wèi)
組件內(nèi)守衛(wèi)有個(gè)三個(gè):路由進(jìn)入之前beforeRouteEnter,路由離開時(shí)beforeRouteLeave,頁面更新時(shí)beforeRouteUpdate
- beforeRouteEnter(to, from, next)
1.使用方式:在組件模板中使用,跟methods: {}等同級(jí)別書寫,組件路由守衛(wèi)是寫在每個(gè)單獨(dú)的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: {}等同級(jí)別書寫,組件路由守衛(wèi)是寫在每個(gè)單獨(dú)的vue文件里面的路由守衛(wèi)
2.代碼:
beforeRouteUpdate (to, from, next) { // 同一頁面,刷新不同數(shù)據(jù)時(shí)調(diào)用, // 可以訪問組件實(shí)例 }
- beforeRouteLeave(to, from, next)
1.使用方式:在組件模板中使用,跟methods: {}等同級(jí)別書寫,組件路由守衛(wèi)是寫在每個(gè)單獨(dú)的vue文件里面的路由守衛(wèi)
2.代碼:
beforeRouteLeave (to, from, next) { // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用 // 可以訪問組件實(shí)例 }
路由獨(dú)享守衛(wèi)
路由獨(dú)享守衛(wèi)只有一個(gè):進(jìn)入路由時(shí)觸發(fā)beforeEnter
- 路由獨(dú)享守衛(wèi) beforeEnter(to, from, next)
1.使用方式:在router.js中使用,路由獨(dú)享守衛(wèi)是在路由配置頁面單獨(dú)給路由配置的一個(gè)守衛(wèi)
2.代碼
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
導(dǎo)航解析流程
1.觸發(fā)進(jìn)入其它路由
2.調(diào)用要離開路由的組件守衛(wèi)beforeRouteLeave
3.調(diào)用全局的前置守衛(wèi)beforeEach
4.在重用的組件里調(diào)用 beforeRouteUpdate
5.在路由配置里的單條路由調(diào)用 beforeEnter
6.解析異步路由組件
7.在將要進(jìn)入的路由組件中調(diào)用beforeRouteEnter
8.調(diào)用全局的解析守衛(wèi)beforeResolve
9.導(dǎo)航被確認(rèn)
10.調(diào)用全局的后置鉤子afterEach
11.觸發(fā) DOM 更新mounted
12.執(zhí)行beforeRouteEnter守衛(wèi)中傳給 next的回調(diào)函數(shù)
補(bǔ)充:下面在看看三個(gè)組件內(nèi)部守衛(wèi)
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
export default { setup() {}, mounted(){ }, methods: { goBack() { this.$router.go(-1) }, }, // 組件內(nèi)守衛(wèi) beforeRouteEnter(to ,from , next){ // next() 可以通過內(nèi)部的回調(diào)函數(shù)訪問實(shí)例 // 在渲染該組件的對(duì)應(yīng)路由被驗(yàn)證前調(diào)用 // 不能獲取組件實(shí)例 `this` ! // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行時(shí),組件實(shí)例還沒被創(chuàng)建! window.console.log(this) // undefined window.console.log(to) window.console.log(from) next((e)=> { window.console.log(e) // 當(dāng)前的this }) }, beforeRouteUpdata(to ,from){ // 無 next // 在當(dāng)前路由改變,但是該組件被復(fù)用時(shí)調(diào)用 // 舉例來說,對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 `/users/:id`,在 `/users/1` 和 `/users/2` 之間跳轉(zhuǎn)的時(shí)候, // 由于會(huì)渲染同樣的 `UserDetails` 組件,因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。 // 因?yàn)樵谶@種情況發(fā)生的時(shí)候,組件已經(jīng)掛載好了,導(dǎo)航守衛(wèi)可以訪問組件實(shí)例 `this` window.console.log(this) window.console.log(to) window.console.log(from) }, beforeRouteLeave(to ,from){ // 無 next // 在導(dǎo)航離開渲染該組件的對(duì)應(yīng)路由時(shí)調(diào)用 // 與 `beforeRouteUpdate` 一樣,它可以訪問組件實(shí)例 `this` window.console.log(this) window.console.log(to) window.console.log(from) }, }
解析 : 這三個(gè)差不多就放在一起還有個(gè)對(duì)照
1.首先來說說執(zhí)行時(shí)機(jī) : 路由獨(dú)享守衛(wèi)的后面 調(diào)用這三個(gè)守衛(wèi) 。
2. 書寫位置 : 在單個(gè)vue文件內(nèi)部 , 與 methods , 等 api 同級(jí)
3. 只有 beforeRouteEnter 參數(shù) 有 next , 因?yàn)檫@個(gè)路由不能訪問this ,于是就有了next 函數(shù) , 可以向里面?zhèn)鬟f一個(gè)回調(diào)函數(shù) , 回調(diào)函數(shù)的參數(shù)就是 this , 可以看代碼, 其他兩個(gè)組件內(nèi)部守衛(wèi) 都可以的訪問this , 所以就沒有必要在去加next ,(官網(wǎng)意思就是這個(gè))
結(jié)尾:
vue2和vue3的寫法基本一致沒有改變
到此這篇關(guān)于vue3中7種路由守衛(wèi)的使用大全的文章就介紹到這了,更多相關(guān)vue3路由守衛(wèi)使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用echarts實(shí)現(xiàn)中國地圖和點(diǎn)擊省份進(jìn)行查看功能
這篇文章主要介紹了vue使用echarts實(shí)現(xiàn)中國地圖和點(diǎn)擊省份進(jìn)行查看功能,本文通過實(shí)例代碼給大家詳細(xì)講解,對(duì)vue echarts 中國地圖相關(guān)知識(shí)感興趣的朋友一起看看吧2022-12-12nuxt.js寫項(xiàng)目時(shí)增加錯(cuò)誤提示頁面操作
這篇文章主要介紹了nuxt.js寫項(xiàng)目時(shí)增加錯(cuò)誤提示頁面操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue3中unplugin-auto-import自動(dòng)引入示例代碼
unplugin-auto-import 這個(gè)插件是為了解決在開發(fā)中的導(dǎo)入問題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動(dòng)引入的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決
這篇文章主要介紹了詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01