基於vue框架項目開發過程中遇到的問題總結(三)


這次遇到的一個問題困擾了我很久很久,大致就是vue路由的addRoutes方法的使用,每次在調用了這個之后router對象中並沒有將路由添加進去,接下來,我一步一步的分析原因及解決方法(個人見解,僅供參考)

(1)先看看我的失敗的代碼

store.getters.addRouters我存在vuex中,但是實際是存於session中的,所以刷新后是不會丟失數據的

在app.vue的mounted輸出this.$router對象,發現options.routes數組並沒有將動態路由添加成功,這個問題困擾了很久,最后找到原因是執行了window.location.reload();使得頁面重新加載了,解決辦法是:在beforeEach里判斷當前路由是否已經有動態路由了,如果沒有則添加,並且拉取用戶信息的處理不放在登錄成功之后,這樣就不會受reload的影響

(2)第二版代碼

這樣改了之后,理論上應該可以了,輸出this.$router對象,發現options.routes數組還是沒有將動態路由添加成功,

在網上找了解決方案,手動將需要添加的路由添加到options.routes數組(由於路由的所有信息我是在vuex存了的,所以直接全部賦值給了options.routes)

做到這一步,已經完成大部分了,options.routes數組有數據了,動態添加的路由可以正常跳轉,頁面也有內容,但是很快我又發現一個問題,動態添加的路由頁面一刷新就涼涼了(空白),在地址欄輸入其他動態添加的路由又是可以正常跳轉的,這就很尷尬了。參考了https://github.com/PanJiaChen/vue-element-admin/blob/master/src/permission.js ,找到了解決方法

將next()換成next({ ...to, replace: true }),// hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record

進行到這一步,基本上就已經可以了,這個問題網上有很多類似,但是他們登錄跟我不一樣,也沒有window.location.reload();這一步,所以解決起來還是有不一樣的地方


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM