解決router.beforeEach()動態(tài)加載路由出現(xiàn)死循環(huán)問題
router.beforeEach()動態(tài)加載路由出現(xiàn)死循環(huán)
采用beforeEach做路由過濾,如果沒登錄就直接跳轉(zhuǎn)到登錄界面,然而發(fā)現(xiàn)個問題就是要么跳轉(zhuǎn)到登錄頁面、然后再調(diào)回首頁,要么卡著不動、要么出現(xiàn)空白頁面。
1、router.beforeEach( to , from ,next) 介紹
to:
即將路由的地址form:
當前的路由地址,也就是馬上要離開的地址next():
執(zhí)行進入下一個路由next(false):
禁止進入下一個路由next('/login'):
路由到/login地址
2、兩種死循環(huán)問題
(1)路由到相同地址的死循環(huán)
比如在beforeEach中設(shè)置未登錄(userData為null)就跳轉(zhuǎn)到登錄頁面
在非登錄頁面是沒有問題的,但是在登錄頁面就出現(xiàn)了死循環(huán)或者空白頁,通過打印我們發(fā)現(xiàn)瀏覽器在登錄頁反復跳轉(zhuǎn)。
在登錄頁面因為沒登錄,userData為null,這時候通過next(’\login’)就會重定向到登錄頁面,重定向到登錄頁面后,這時候userData依然為空,那么就要繼續(xù)重定向登錄頁面,于是出現(xiàn)了死循環(huán)。
對這種情況加個判斷條件就能解決。
(2)動態(tài)加載路由表出現(xiàn)的死循環(huán)
在beforeEach()通過動態(tài)加載路由表
在beforeEach()中都會獲取路由表存入store,然后從store取出動態(tài)加入此路由表。
但是每次路由之前都會重新添加路由表,每次添加完路由表當前默認路徑是首頁(to.path顯示內(nèi)容)而不是登陸頁面,頁面會自動跳轉(zhuǎn)到首頁,但是如果這時候通過next(’/login’)跳轉(zhuǎn)到登錄頁面,那么就會重新路由,在路由前又開始重新添加路由表,然后當前路徑是首頁,這時候又要跳轉(zhuǎn)到登錄頁面因此就會出現(xiàn)死循環(huán)。
這時候我們就不能反復加載路由表,加個判斷條件就行了。
vue動態(tài)加載路由進入頁面白屏或beforeEach死循環(huán)踩坑
開發(fā)的哥們兒從網(wǎng)上找了一個簡單的框架,通過auth的配置來決定什么權(quán)限可以進入到什么頁面。具體操作就是登陸獲取用戶的權(quán)限,然后遍歷本地的總路由表匹配權(quán)限返回當前用戶可以訪問的路由表。網(wǎng)上大多數(shù)的方案是從后端接口獲取權(quán)限和路由表。此為兩者之間的差異,但是不影響填坑方案的可行性
先放上本地總路由表部分代碼,就是在這個表中根據(jù)權(quán)限進一步遍歷篩選的,通過硬編碼的方式寫在項目中,auth[]內(nèi)用數(shù)字、用中文、用單詞也都是可以的
const routerList = [{ path: '/', component: Layout, redirect: '/dashboard', auth: [0, 1, 2], meta: { title: '首頁', icon: 'dashboard' }, children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: '首頁', icon: 'dashboard' }, auth: [0, 1, 2] }] }, { path: '/enterprises', component: Layout, name: 'Enterprises', redirect: 'noRedirect', auth: [0, 1, 2], meta: { title: '智慧園區(qū)', icon: 'el-icon-office-building' }, children: [ { path: 'huanjingjiance', name: 'huanjingjiance', component: () => import('@/views/environment/monitor'), auth: [0, 2], meta: { title: '環(huán)境監(jiān)測' }, } ] }, { path: '/user', component: Layout, name: 'User', redirect: 'noRedirect', auth: [0, 1], meta: { title: '人員信息', icon: 'el-icon-user' }, children: [{ path: 'index', name: 'Index', component: () => import('@/views/user/index'), meta: { title: '個人信息' }, auth: [0, 1], }] } ]
首先在路由中需要指定登錄的頁面,這個是不分權(quán)限的,所以不需要動態(tài)獲取
const constantRoutes = [ { path: '/login', component: () => import('@/views/login/index'), hidden: true }, ...dynamicRouter ] var createRouter = () => new Router({ mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: constantRoutes })
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+element實現(xiàn)動態(tài)換膚的示例代碼
本文主要介紹了vue+element實現(xiàn)動態(tài)換膚的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09vue parseHTML函數(shù)源碼解析 AST預備知識
這篇文章主要為大家介紹了vue parseHTML函數(shù)源碼解析 AST預備知識示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)3
這篇文章主要為大家詳細介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn),教大家如何在某個對象中,新增某個屬性,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01vue-cli開發(fā)時,關(guān)于ajax跨域的解決方法(推薦)
下面小編就為大家分享一篇vue-cli開發(fā)時,關(guān)于ajax跨域的解決方法(推薦),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02jenkins自動構(gòu)建發(fā)布vue項目的方法步驟
這篇文章主要介紹了jenkins自動構(gòu)建發(fā)布vue項目的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01淺談vue項目優(yōu)化之頁面的按需加載(vue+webpack)
本篇文章主要介紹了vue項目優(yōu)化之頁面的按需加載(vue+webpack),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12