vue路由守衛及路由守衛無限循環問題怎么解決
這篇“vue路由守衛及路由守衛無限循環問題怎么解決”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue路由守衛及路由守衛無限循環問題怎么解決”文章吧。
先貼一波官方文檔的內容
const?router?=?new?VueRouter({?...?})
router.beforeEach((to,?from,?next)?=>?{
?//?...
})當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處于?等待中。
每個守衛方法接收三個參數：
to: Route: 即將要進入的目標?路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來?resolve?這個鉤子。執行效果依賴?next?方法的調用參數。
next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是?confirmed?(確認的)。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到?from?路由對應的地址。
next('/')?或者?next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向?next?傳遞任意位置對象，且允許設置諸如?replace: true、name: 'home'?之類的選項以及任何用在?router-link?的?to?prop?或?router.push?中的選項。
next(error): (2.4.0+) 如果傳入?next?的參數是一個?Error?實例，則導航會被終止且該錯誤會被傳遞給?router.onError()?注冊過的回調。確保要調用?next?方法，否則鉤子就不會被 resolved
然后這是我自己的總結
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)?=>?{
?//將所有需要登陸才顯示的頁面的路由都放進一個數組
?const?nextRoute?=?['index',?'library',?'design',?'administration',?'production'];
?//獲取登陸狀態
?let?isLogin?=?Global.isLogin
?
?if(to.name?===?'login')?{?//如果是登錄頁，則跳過驗證
?next()?//必不可少
?return?//以下的代碼不執行
?}
?if(nextRoute.indexOf(to.name)?>=?0)?{?//判斷該頁面是否需要登陸
?if(!isLogin)?{?//判斷登陸狀態
??next({?name?:?'login'})?//如果未登錄，則跳轉到登錄頁
?}?else?{
??next()?//如果已經登陸，那就可以跳轉
?}
?}?else?{?//其他的無需登陸的頁面不做驗證
??next()
?}
?
})
export?default?router這樣就實現了全局路由守衛
關于路由守衛無限循環問題
如果你的代碼是這樣
?if(isLogin)?{
?next()
?}?else?{
?next({?name:?'login')}
?}這樣的話就會陷入無限循環
因為你的?? next({ name: 'login')} 是相當于一個路由跳轉，它會再次觸發全局路由守衛，你又進入了全局路由守衛進行再次判斷，如此循環。
所以，想要結束路由守衛，整段代碼的邏輯必須由 next() 進行結尾。比如像我上面寫的，當需要進入登錄頁的時候，
?if(to.name?===?'login')?{?
?next()?
?return?
?}加上這個判斷，當你進入登錄頁的時候也會調用next() , 路由守衛進入確認狀態，路由才會進行跳轉。
vue是什么
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
以上就是關于“vue路由守衛及路由守衛無限循環問題怎么解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注蝸牛博客行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
評論