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

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

解決思路

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

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

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

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

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

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

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

當添加路由addRoutes的時候，正常點擊是沒問題的，但是刷新一次頁面，那么動態(tài)添加的路由就會失效，

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

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

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

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

總結

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

最新評論