vue動態(tài)加載路由的3種方式總結(jié)
vue動態(tài)加載路由3種方式
使用場景
后管系統(tǒng)，處理不同角色，不同權(quán)限，顯示不同菜單。
目的
根據(jù)需求，動態(tài)加載路由，處理后臺返回的不同菜單權(quán)限。
方法
方法一：
注冊所有路由，根據(jù)后臺返回菜單數(shù)據(jù)，顯示菜單。
弊端：路由全部注冊，菜單沒有顯示；用戶可以手動更改url值，依然會顯示當前組件。
方法二：
前端手動寫好，根據(jù)不同的角色，創(chuàng)建多個不同的路由，根據(jù)登錄的角色，動態(tài)的加載某個數(shù)組。
弊端：如果后臺新增角色，那么只有修改前端代碼，重新部署。
方法三（推薦）：
菜單動態(tài)生成路由映射
菜單->url->路由->path->component（數(shù)組，routes）
后臺返回的菜單，有url；url對應的是路由里面的path；path對面不同的組件。
- 菜單中有加載組件的名稱component（名稱/路徑必須和前端寫好的一致，不可移動組件位置）
- （推薦）直接根據(jù)菜單的url。查找前端代碼中的對應關系。生成數(shù)組routes
注意：
根據(jù)業(yè)務需求自行選擇
vue動態(tài)添加路由后刷新失效
當添加路由addRoutes的時候，正常點擊是沒問題的，但是刷新一次頁面，那么動態(tài)添加的路由就會失效，
用getRoutes() 打印出來看的時候確定路由已經(jīng)添加進去了，所以這個原因應該是
當你執(zhí)行到addRoutes時，路由要添加進去了，但是，路由不是響應式的，從執(zhí)行循序來看，地址欄快于路由的添加，那找不到這個路徑了就只能白屏了，除非設置了404的頁面
那么怎么解決這個問題， 只需要再進行一次攔截就好了，代碼如下：
實測過，這樣已經(jīng)解決刷新頁面空白的問題了，
同學們可以參考一下，具體問題還是要具體分析
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue使用showdown并實現(xiàn)代碼區(qū)域高亮的示例代碼
這篇文章主要介紹了vue使用showdown并實現(xiàn)代碼區(qū)域高亮的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
解決父組件將子組件作為彈窗調(diào)用只執(zhí)行一次created的問題
這篇文章主要介紹了解決父組件將子組件作為彈窗調(diào)用只執(zhí)行一次created的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實現(xiàn)思路其實也很簡單，需要從后臺獲取七牛token上傳圖片到七牛，具體示例代碼大家跟隨小編一起學習吧2018-10-10
vue中后端做Excel導出功能返回數(shù)據(jù)流前端的處理操作
這篇文章主要介紹了vue中后端做Excel導出功能返回數(shù)據(jù)流前端的處理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue 3 + Element Plus 封裝單列控制編輯的可編輯表格
在Web應用開發(fā)中實現(xiàn)表格數(shù)據(jù)編輯功能至關重要,本文將詳細介紹如何使用Vue3和ElementPlus庫來構(gòu)建一個支持單列編輯的表格組件,本教程詳細闡述了組件創(chuàng)建過程和數(shù)據(jù)綁定機制,幫助你快速掌握Vue3中表格編輯功能的實現(xiàn),感興趣的朋友一起看看吧2024-09-09
vue3集成Element-plus實現(xiàn)按需自動引入組件的方法總結(jié)
vue3出來一段時間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關于vue3集成Element-plus實現(xiàn)按需自動引入組件的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了如何實現(xiàn)無感刷新token，當token過期的時候，刷新token,前端需要做到無感刷新token,即刷token時要做到用戶無感知，避免頻繁登錄。下面我們大家一起進入文章看看實現(xiàn)思路即詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過實例代碼案例給大家詳細介紹，需要的朋友可以參考下2021-07-07
一文帶你搞懂Vue中Provide/Inject的使用與高級應用
這篇文章將詳細介紹如何在?Vue.js?中使用?provide?和?inject?模式,并探討其在實際應用中的高級用法,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
這篇文章主要介紹了vue更改數(shù)組中的值，本文通過兩個例子，給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02