router.beforeEach() 動態加載路由出現死循環問題

採用beforeEach做路由過濾,如果沒登錄就直接跳轉到登錄界面,然而發現個問題就是要麼跳轉到登錄頁面、然後再調回首頁,要麼卡着不動、要麼出現空白頁面。

1、router.beforeEach( to , from ,next) 介紹

to: 即將路由的地址
form: 當前的路由地址,也就是馬上要離開的地址
next(): 執行進入下一個路由
next(false): 禁止進入下一個路由
next('/login'): 路由到/login地址

2、兩種死循環問題
(1)路由到相同地址的死循環

比如在beforeEach中設置未登錄(userData爲null)就跳轉到登錄頁面
在這裏插入圖片描述
在非登錄頁面是沒有問題的,但是在登錄頁面就出現了死循環或者空白頁,通過打印我們發現瀏覽器在登錄頁反覆跳轉。在登錄頁面因爲沒登錄,userData爲null,這時候通過next(’\login’)就會重定向到登錄頁面,重定向到登錄頁面後,這時候userData依然爲空,那麼就要繼續重定向登錄頁面,於是出現了死循環。 對這種情況加個判斷條件就能解決。
在這裏插入圖片描述

(2)動態加載路由表出現的死循環

在beforeEach()通過動態加載路由表
在這裏插入圖片描述
在beforeEach()中都會獲取路由表存入store,然後從store取出動態加入此路由表。但是每次路由之前都會重新添加路由表,每次添加完路由表當前默認路徑是首頁(to.path顯示內容)而不是登陸頁面,頁面會自動跳轉到首頁,但是如果這時候通過next(’/login’)跳轉到登錄頁面,那麼就會重新路由,在路由前又開始重新添加路由表,然後當前路徑是首頁,這時候又要跳轉到登錄頁面因此就會出現死循環。 這時候我們就不能反覆加載路由表,加個判斷條件就行了。
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章