Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁(yè)白屏問(wèn)題
更新時(shí)間：2023年10月23日 09:19:09 作者：小楊很困1
這篇文章主要介紹了Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁(yè)白屏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Antd Pro動(dòng)態(tài)路由加載，服務(wù)器重啟首頁(yè)白屏
剛接手的一個(gè)項(xiàng)目，將靜態(tài)路由改為動(dòng)態(tài)路由，使用的是Ant Design Vue Pro框架。
其中遇到了點(diǎn)問(wèn)題紀(jì)錄一下。
問(wèn)題點(diǎn)
后端重啟服務(wù)器后，頁(yè)面過(guò)期重定向到登陸頁(yè)面，登錄之后繞過(guò)了permission.js中router.beforeEach()這個(gè)鉤子
所以里面的邏輯都沒(méi)有走，拿不到路由。
但是登錄會(huì)走登錄接口，跳轉(zhuǎn)首頁(yè)白屏，
解決方法
- 登錄的時(shí)候讓后端在返回值的時(shí)候帶上該賬戶的權(quán)限列表；
- 登陸成功后對(duì)權(quán)限進(jìn)行緩存；
- 在generator-routers.js中取該緩存下來(lái)的權(quán)限；
- 最重要的一點(diǎn)就是在request.js文件中請(qǐng)求攔截的時(shí)候移除掉緩存，同時(shí)千萬(wàn)不要去調(diào)用resetRouter()這個(gè)方法，這個(gè)方法是重置路由的
// 重置路由
export function resetRouter () {
const newRouter = createRouter()
router.matcher = newRouter.matcher
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則)
這篇文章主要介紹了element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則),本篇文章記錄el-table增加一行可編輯的數(shù)據(jù)列,進(jìn)行增刪改,感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue3項(xiàng)目中父子組件之間互相傳值、傳遞方法詳細(xì)介紹
組件傳值問(wèn)題是Vue開(kāi)發(fā)中非常重要的一個(gè)話題,涉及到父子組件和非父子組件之間的傳值問(wèn)題,這篇文章主要介紹了Vue3項(xiàng)目中父子組件之間互相傳值、傳遞方法的相關(guān)資料,需要的朋友可以參考下2025-05-05
vue 進(jìn)階之實(shí)現(xiàn)父子組件間的傳值
這篇文章主要介紹了vue 進(jìn)階之實(shí)現(xiàn)父子組件間的傳值，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue實(shí)現(xiàn)上傳圖片添加水印(升級(jí)版)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印的升級(jí)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于vue3學(xué)習(xí)筆記之自定義組件的相關(guān)資料,組件系統(tǒng)是Vue.js其中一個(gè)重要的概念,它提供了一種抽象,讓我們可以使用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用,需要的朋友可以參考下2023-08-08
vue用遞歸組件寫(xiě)樹(shù)形控件的實(shí)例代碼
最近在vue項(xiàng)目中遇到需要用樹(shù)形控件的部分，比如導(dǎo)航目錄是不確定的，所以必須要用樹(shù)形結(jié)構(gòu)，下面腳本之家小編給大家?guī)?lái)了vue用遞歸組件寫(xiě)樹(shù)形控件的實(shí)例代碼，需要的朋友參考下吧2018-07-07
關(guān)于json-bigint處理大數(shù)字問(wèn)題
這篇文章主要介紹了關(guān)于json-bigint處理大數(shù)字問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
本篇文章主要介紹了Vue中添加過(guò)渡效果的方法，Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果，有興趣的同學(xué)可以了解一下。2017-03-03
監(jiān)聽(tīng)element-ui table滾動(dòng)事件的方法
這篇文章主要介紹了監(jiān)聽(tīng)element-ui table滾動(dòng)事件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能
這篇文章主要介紹了vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能，本文圖文并茂，代碼實(shí)例相結(jié)合介紹的非常詳細(xì)，需要的朋友參考下吧2019-07-07