vue路由守衛(wèi)及路由守衛(wèi)無限循環(huán)問題詳析
先貼一波官方文檔的內(nèi)容
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
當(dāng)一個導(dǎo)航觸發(fā)時,全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行,此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。
每個守衛(wèi)方法接收三個參數(shù):
- to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
- from: Route: 當(dāng)前導(dǎo)航正要離開的路由
- next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
- next(): 進(jìn)行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。
- next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應(yīng)的地址。
- next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個新的導(dǎo)航。你可以向 next 傳遞任意位置對象,且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
- next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例,則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)。確保要調(diào)用 next 方法,否則鉤子就不會被 resolved
然后這是我自己的總結(jié)
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login/Login'
import Index from '../pages/index/Index'
import Library from '../pages/library/Library'
import Design from '../pages/design/Design'
import Administration from '../pages/administration/Administration'
import Production from '../pages/production/Production'
import Global from '../common/global/Global'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'login',
component: Login
}, {
path: '/index',
name: 'index',
component: Index
}, {
path: '/library',
name: 'library',
component: Library
}, {
path: '/design',
name: 'design',
component: Design
}, {
path: '/administration',
name: 'administration',
component: Administration
}, {
path: '/production',
name: 'production',
component: Production
}
]
})
router.beforeEach ((to,from,next) => {
//將所有需要登陸才顯示的頁面的路由都放進(jìn)一個數(shù)組
const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
//獲取登陸狀態(tài)
let isLogin = Global.isLogin
if(to.name === 'login') { //如果是登錄頁,則跳過驗證
next() //必不可少
return //以下的代碼不執(zhí)行
}
if(nextRoute.indexOf(to.name) >= 0) { //判斷該頁面是否需要登陸
if(!isLogin) { //判斷登陸狀態(tài)
next({ name : 'login'}) //如果未登錄,則跳轉(zhuǎn)到登錄頁
} else {
next() //如果已經(jīng)登陸,那就可以跳轉(zhuǎn)
}
} else { //其他的無需登陸的頁面不做驗證
next()
}
})
export default router
這樣就實現(xiàn)了全局路由守衛(wèi)
關(guān)于路由守衛(wèi)無限循環(huán)問題
如果你的代碼是這樣
if(isLogin) {
next()
} else {
next({ name: 'login')}
}
這樣的話就會陷入無限循環(huán)
因為你的 next({ name: 'login')} 是相當(dāng)于一個路由跳轉(zhuǎn),它會再次觸發(fā)全局路由守衛(wèi),你又進(jìn)入了全局路由守衛(wèi)進(jìn)行再次判斷,如此循環(huán)。
所以,想要結(jié)束路由守衛(wèi),整段代碼的邏輯必須由 next() 進(jìn)行結(jié)尾。比如像我上面寫的,當(dāng)需要進(jìn)入登錄頁的時候,
if(to.name === 'login') {
next()
return
}
加上這個判斷,當(dāng)你進(jìn)入登錄頁的時候也會調(diào)用next() , 路由守衛(wèi)進(jìn)入確認(rèn)狀態(tài),路由才會進(jìn)行跳轉(zhuǎn)
以上就是我在學(xué)習(xí)vue-router的路由守衛(wèi)的總結(jié)
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。
相關(guān)文章
Vue使用ElemenUI對table的指定列進(jìn)行合算的方法
這篇文章主要介紹了Vue使用ElemenUI對table的指定列進(jìn)行合算的方法,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)
這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定原理
這篇文章主要介紹了proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點開始展開全文內(nèi)容,圍繞proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定的相關(guān)資料,,需要的朋友可以參考一下2021-12-12
echarts鼠標(biāo)覆蓋高亮顯示節(jié)點及關(guān)系名稱詳解
下面小編就為大家分享一篇echarts鼠標(biāo)覆蓋高亮顯示節(jié)點及關(guān)系名稱詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue?報錯-4058?ENOENT:no?such?file?or?directory的原因及解決方法
Vue?報錯-4058?ENOENT:?no?such?file?or?directory的原因和解決辦法,關(guān)于為什么為會報這個錯誤,按照字面意思的理解就是沒有找到這個文件或這個路徑,說明是路徑不對,本文給大家分享解決方案,感興趣的朋友一起看看吧2023-10-10
vue實現(xiàn)樹形結(jié)構(gòu)樣式和功能的實例代碼
這篇文章主要介紹了vue樹形結(jié)構(gòu)樣式和功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10

