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