vue項目動態(tài)路由刷新界面白屏undefined問題及解決
更新時間：2025年07月30日 10:10:56 作者：星空下的曙光
這篇文章主要介紹了vue項目動態(tài)路由刷新界面白屏undefined問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
這里也是調(diào)試了好久終于是解決了；
總共嘗試了多種解決方案；總結(jié)兩種我已經(jīng)試驗成功的分享給大家
第一種：動態(tài)路由無非就是因為是接口請求后所導致
- 這是一個笨方法，但是出奇的好用；
- 可以用于解決燃眉之急【本質(zhì)就是不使用動態(tài)路由的模式】
例如：
- 路由配置的時候直接使用原始的路由配置；
- 這樣刷新以后就可以了；
- 當然我們是有追求的向往進步的 這樣也只是飲鴆止渴
第二種：利用本地緩存，localStorage，sessionStorage
注意：vuex處理時也是使用了本地緩存，這里直接跳過vuex感興趣的可以自行研究
處理方法在首屏進入的時候即就請求動態(tài)路由添加至緩存中去，前提需要首頁不是動態(tài)路由，或者使用第一種方式將首頁變?yōu)殪o態(tài)路由
確保首頁是靜態(tài)路由后，請求接口后即可將請求回的路由信息進行緩存
這里我設置了一個 routersArr key值進行路由的緩存；
然后再路由配置文件中獲取緩存，讀取并添加到 routes 中
注意：if判斷讀緩存添加路由也不可放在 new VueRouter()后面，否則也會加載白屏
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3中watch監(jiān)聽不同數(shù)據(jù)源的方法總結(jié)
這篇文章主要為大家詳細介紹了vue3中watch監(jiān)聽不同數(shù)據(jù)源的常用方法,文中的示例代碼講解詳細,具有一定的借鑒價值,大家可以根據(jù)自己的需要進行選擇2026-03-03
Vue前端項目的打包和部署是一個常見的開發(fā)流程,涉及多個步驟和配置,下面這篇文章主要介紹了前端vue項目打包及部署過程的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-09-09
這篇文章主要介紹了vue指令中的v-once用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中如何使用vue-baberrage生成彈幕，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了Vue導入Echarts實現(xiàn)散點圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-12-12
這篇文章主要介紹了vue3的api解讀之ref和reactive詳解，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
在Vue中實現(xiàn)地圖熱點展示與交互的方法詳解（如熱力圖）
隨著大數(shù)據(jù)和可視化技術的發(fā)展，地圖熱點展示越來越受到人們的關注，在Vue應用中，我們通常需要實現(xiàn)地圖熱點的展示和交互，以便更好地呈現(xiàn)數(shù)據(jù)和分析結(jié)果，本文將介紹在Vue中如何進行地圖熱點展示與交互，包括熱力圖、點聚合等2023-07-07
Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)
這篇文章主要介紹了Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家介紹了Vue響應式原理及雙向數(shù)據(jù)綁定的示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了vue源碼之首次渲染過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02