您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue3中的導(dǎo)航守衛(wèi)如何使用”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Vue3中的導(dǎo)航守衛(wèi)如何使用”吧!
正如其名,vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中:全局的,單個路由獨(dú)享的,或者組件級的。
查看以下情形:
點(diǎn)擊主頁鏈接時,默認(rèn)情況下可直接進(jìn)入指定界面,如圖,但是問題是該跳轉(zhuǎn)的界面是需要用戶登錄后方可訪問的
可設(shè)置導(dǎo)航守衛(wèi)來檢測用戶是否登錄,如果已登錄,則進(jìn)入后臺頁,如果未登錄,則強(qiáng)制進(jìn)入登錄頁,如圖
每次發(fā)生路由的導(dǎo)航跳轉(zhuǎn)時,都會觸發(fā)全局前置守衛(wèi),因此,在全局前置守衛(wèi)中,程序員可以對每個路由進(jìn)行訪問權(quán)限的控制
1、 使用方式
你可以在 router/index.js 頁面中使用 router.beforeEach((to, from, next) => {}) 注冊一個全局前置守衛(wèi)。
2、 代碼:
// router/index.js 頁面 router.beforeEach((to, from, next) => { console.log(to, from); next() });
1、 使用方式
你可以用 router.beforeResolve 注冊一個全局守衛(wèi)。這和 router.beforeEach 類似,因為它在 每次導(dǎo)航時都會觸發(fā),但是確保在導(dǎo)航被確認(rèn)之前,同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后,解析守衛(wèi)就被正確調(diào)用。
2、 代碼:
// router/index.js 頁面 router.beforeResolve((to, from, next) => { console.log(to,from); next() })
1、 使用方式
你也可以注冊全局后置鉤子,然而和守衛(wèi)不同的是,這些鉤子不會接受 next 函數(shù)也不會改變導(dǎo)航本身:
2、 代碼:
// router/index.js 頁面 router.afterEach((to, from) => { console.log(to,from); })
它們對于分析、更改頁面標(biāo)題、聲明頁面等輔助功能以及許多其他事情都很有用。
1、 使用方式
你可以直接在路由配置上定義 beforeEnter 守衛(wèi):
2、 代碼:
// router/index.js 頁面(路由規(guī)則中) const routes = [ { path: '/home', name: 'Home', component: HomeView, beforeEnter: (to, from,next) => { console.log(to, from); next() }, }, ]
3、組件內(nèi)守衛(wèi)(3個)
組件內(nèi)守衛(wèi)有個三個:路由進(jìn)入之前beforeRouteEnter,路由離開時beforeRouteLeave,頁面更新時beforeRouteUpdate
beforeRouteEnter(to, from, next)
1、 使用方式
在組件模板中使用,跟methods: {}等同級別書寫,組件路由守衛(wèi)是寫在每個單獨(dú)的vue文件里面的路由守衛(wèi)
2、 代碼:
// vue 組件內(nèi)使用 onBeforeRouteUpdate((to, from) => { //當(dāng)前組件路由改變后,進(jìn)行觸發(fā) console.log(to); });
注意:在 vue3 中的 setup 函數(shù)中是不可以使用 beforeRouterEnter 這個路由守衛(wèi)的
beforeRouteUpdate(to, from, next)
1、 使用方式
在組件模板中使用,跟 methods: {} 等同級別書寫,組件路由守衛(wèi)是寫在每個單獨(dú)的 vue 文件里面的路由守衛(wèi)
2、 代碼:
// vue 組件內(nèi)使用 onBeforeRouteUpdate((to, from) => { //當(dāng)前組件路由改變后,進(jìn)行觸發(fā) console.log(to); });
beforeRouteLeave(to, from, next)
1、 使用方式 在組件模板中使用, 跟methods: {} 等同級別書寫,組件路由守衛(wèi)是寫在每個單獨(dú)的 vue 文件里面的路由守衛(wèi)
2、 代碼:
// vue 組件內(nèi)使用 onBeforeRouteLeave((to, from) => { //離開當(dāng)前的組件,觸發(fā) alert("我離開啦"); });
to:將要訪問的路由信息對象
from:將要離開的路由信息對象
next:函數(shù)
調(diào)用next()表示放行,允許這次路由導(dǎo)航
調(diào)用next(false)表示不放行,不允許此次路由導(dǎo)航
調(diào)用next({routerPath})表示導(dǎo)航到此地址,一般情況用戶未登錄時,會導(dǎo)航到登陸界面
提示:該函數(shù)在導(dǎo)航守衛(wèi)中可出現(xiàn)多次,但是只能被調(diào)用一次!!!
如果你正在使用組合 API 和 setup 函數(shù)來編寫組件,你可以通過 onBeforeRouteUpdate 和 onBeforeRouteLeave 分別添加 update 和 leave 守衛(wèi)。 請參考組合 API 部分以獲得更多細(xì)節(jié)。
具體請看vue-router的官方文檔
導(dǎo)航守衛(wèi) | Vue Router
方法一、我們可以在設(shè)置路由的時候,使用beforeEnter方法攔截,即在router.js中:
{ path: '/', name: 'home component: () => import('@/xxx.vue'), beforeEnter: (to, from) => { // 可以在定義路由的時候監(jiān)聽from和to } }
方法二、我們還可以使用vue2的寫法,使用選項式api,就可以使用beforeRouterEnter這個鉤子了
<script> export default { beforeRouteEnter(to, from) { console.log('before router enter', to, from) }, mounted() { console.log('mounted') }, }
// 模擬是否登錄(true為登錄,false為未登錄) let token = true router.beforeEach((to, from, next) => { // 判斷有沒有登錄 if (!token) { // 如果沒有登錄,并且是跳轉(zhuǎn)至登錄頁 if (to.name == "Login") { // 直接跳轉(zhuǎn) next(); } else { // 否則直接強(qiáng)制跳轉(zhuǎn)至登錄頁 router.push('/login') } } else { // 如果已經(jīng)登錄,并且不是跳轉(zhuǎn)至登錄頁 if (to.name !== "Login") { // 直接跳轉(zhuǎn) next(); } else { // 否則直接強(qiáng)制跳轉(zhuǎn)至上一個頁面 router.push(from.path) } } });
感謝各位的閱讀,以上就是“Vue3中的導(dǎo)航守衛(wèi)如何使用”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Vue3中的導(dǎo)航守衛(wèi)如何使用這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。