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