溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題如何解決

發(fā)布時(shí)間:2023-04-19 15:35:44 來(lái)源:億速云 閱讀:175 作者:iii 欄目:開(kāi)發(fā)技術(shù)

這篇“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)路由;

    vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題如何解決

    第一次 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)添加路由!

    vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題如何解決

    3、如果操作完成還是白屏-------請(qǐng)注意黃色框中的next()的改變!

    vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題如何解決

    vue動(dòng)態(tài)添加路由后刷新失效

    當(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)行一次攔截就好了,代碼如下:

    vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wè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è)資訊頻道。

    向AI問(wèn)一下細(xì)節(jié)
    推薦閱讀:
    1. vue
    2. vue分頁(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)容。

    vue
    AI