您好,登錄后才能下訂單哦!
這篇“vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題如何解決”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題如何解決”文章吧。
頁(yè)面刷新白屏其實(shí)是因?yàn)関uex引起的,由于刷新頁(yè)面vuex數(shù)據(jù)會(huì)丟失,所以動(dòng)態(tài)添加路由這一步也就失效了(之前以為,將動(dòng)態(tài)添加的路由存儲(chǔ)在了sessionStorage中,就不會(huì)vuex刷新數(shù)據(jù)丟失的影響,師父解惑:在通過(guò)vuex中的state屬性存儲(chǔ)路由在sessionStorage中,只是存儲(chǔ)了左側(cè)菜單欄展示的信息path地址,但是并沒(méi)有存進(jìn)去路由詳細(xì)信息,比如name,meta值,利用vue插件即可看到本地route里面的真實(shí)數(shù)據(jù)!所以;只需要添加路由守衛(wèi),在每次頁(yè)面刷新的時(shí)候都來(lái)判斷是否添加的動(dòng)態(tài)路由【這里設(shè)置一個(gè)變量記錄是否添加的布爾值】,如果為false,即再次執(zhí)行一遍添加動(dòng)態(tài)路由的過(guò)程即可next()??!大功告成)
詳細(xì)步驟:詳細(xì)代碼上一篇文章有,步驟只解決白屏問(wèn)題!
1、在store.js中的mutations中添加動(dòng)態(tài)路由;
第一次 addRouters(state.asyncrouters)由于state.asyncrouters是常量路由和動(dòng)態(tài)路由的合并,這樣添加會(huì)造成路由的重復(fù)添加----所以將異步路由拉出來(lái)添加就不會(huì)造成重復(fù)。
2、目的:在路由守衛(wèi)中判斷變量為false時(shí),調(diào)用此方法在執(zhí)行一遍:動(dòng)態(tài)添加路由!
3、如果操作完成還是白屏-------請(qǐng)注意黃色框中的next()的改變!
當(dāng)添加路由addRoutes的時(shí)候,正常點(diǎn)擊是沒(méi)問(wèn)題的,但是刷新一次頁(yè)面,那么動(dòng)態(tài)添加的路由就會(huì)失效,
用getRoutes() 打印出來(lái)看的時(shí)候確定路由已經(jīng)添加進(jìn)去了,所以這個(gè)原因應(yīng)該是
當(dāng)你執(zhí)行到addRoutes
時(shí),路由要添加進(jìn)去了,但是,路由不是響應(yīng)式的,從執(zhí)行循序來(lái)看,地址欄快于路由的添加,那找不到這個(gè)路徑了就只能白屏了,除非設(shè)置了404
的頁(yè)面
那么怎么解決這個(gè)問(wèn)題, 只需要再進(jìn)行一次攔截就好了,代碼如下:
以上就是關(guān)于“vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題如何解決”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。