vue動(dòng)態(tài)添加路由后刷新頁面白屏

作為一個(gè)前端新手，項(xiàng)目中遇到權(quán)限處理時(shí)，通常會(huì)采用動(dòng)態(tài)添加路由的方法來實(shí)現(xiàn)，此方法會(huì)在登陸時(shí)利用vuex將用戶信息以及菜單欄需要展示的菜單路由保存，這樣在用戶第一次登陸項(xiàng)目時(shí)，動(dòng)態(tài)渲染的菜單路由頁面一切正常，但是當(dāng)再次刷新的時(shí)候，就會(huì)出現(xiàn)白屏現(xiàn)象。。查閱了很多網(wǎng)站，教程代碼一大堆，果斷放棄，最后請(qǐng)教了我?guī)煾福痪湓捊鉀Q！

解決思路

頁面刷新白屏其實(shí)是因?yàn)関uex引起的，由于刷新頁面vuex數(shù)據(jù)會(huì)丟失，所以動(dòng)態(tài)添加路由這一步也就失效了（之前以為，將動(dòng)態(tài)添加的路由存儲(chǔ)在了sessionStorage中，就不會(huì)vuex刷新數(shù)據(jù)丟失的影響，師父解惑：在通過vuex中的state屬性存儲(chǔ)路由在sessionStorage中，只是存儲(chǔ)了左側(cè)菜單欄展示的信息path地址，但是并沒有存進(jìn)去路由詳細(xì)信息，比如name，meta值，利用vue插件即可看到本地route里面的真實(shí)數(shù)據(jù)！所以；只需要添加路由守衛(wèi)，在每次頁面刷新的時(shí)候都來判斷是否添加的動(dòng)態(tài)路由【這里設(shè)置一個(gè)變量記錄是否添加的布爾值】，如果為false，即再次執(zhí)行一遍添加動(dòng)態(tài)路由的過程即可next（）??！大功告成）

詳細(xì)步驟：詳細(xì)代碼上一篇文章有，步驟只解決白屏問題！

1、在store.js中的mutations中添加動(dòng)態(tài)路由；

第一次 addRouters（state.asyncrouters）由于state.asyncrouters是常量路由和動(dòng)態(tài)路由的合并，這樣添加會(huì)造成路由的重復(fù)添加----所以將異步路由拉出來添加就不會(huì)造成重復(fù)。

2、目的：在路由守衛(wèi)中判斷變量為false時(shí)，調(diào)用此方法在執(zhí)行一遍：動(dòng)態(tài)添加路由！

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

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

當(dāng)添加路由addRoutes的時(shí)候，正常點(diǎn)擊是沒問題的，但是刷新一次頁面，那么動(dòng)態(tài)添加的路由就會(huì)失效，

用getRoutes() 打印出來看的時(shí)候確定路由已經(jīng)添加進(jìn)去了，所以這個(gè)原因應(yīng)該是

當(dāng)你執(zhí)行到addRoutes時(shí)，路由要添加進(jìn)去了，但是，路由不是響應(yīng)式的，從執(zhí)行循序來看，地址欄快于路由的添加，那找不到這個(gè)路徑了就只能白屏了，除非設(shè)置了404的頁面

那么怎么解決這個(gè)問題， 只需要再進(jìn)行一次攔截就好了，代碼如下：

實(shí)測過，這樣已經(jīng)解決刷新頁面空白的問題了，

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論