vue動態(tài)加載路由的3種方式總結
vue動態(tài)加載路由3種方式
使用場景
后管系統(tǒng)，處理不同角色，不同權限，顯示不同菜單。
目的
根據需求，動態(tài)加載路由，處理后臺返回的不同菜單權限。
方法
方法一：
注冊所有路由，根據后臺返回菜單數據，顯示菜單。
弊端：路由全部注冊，菜單沒有顯示；用戶可以手動更改url值，依然會顯示當前組件。
方法二：
前端手動寫好，根據不同的角色，創(chuàng)建多個不同的路由，根據登錄的角色，動態(tài)的加載某個數組。
弊端：如果后臺新增角色，那么只有修改前端代碼，重新部署。
方法三（推薦）：
菜單動態(tài)生成路由映射
菜單->url->路由->path->component（數組，routes）
后臺返回的菜單，有url；url對應的是路由里面的path；path對面不同的組件。
- 菜單中有加載組件的名稱component（名稱/路徑必須和前端寫好的一致，不可移動組件位置）
- （推薦）直接根據菜單的url。查找前端代碼中的對應關系。生成數組routes
注意：
根據業(yè)務需求自行選擇
vue動態(tài)添加路由后刷新失效
當添加路由addRoutes的時候，正常點擊是沒問題的，但是刷新一次頁面，那么動態(tài)添加的路由就會失效，
用getRoutes() 打印出來看的時候確定路由已經添加進去了，所以這個原因應該是
當你執(zhí)行到addRoutes時，路由要添加進去了，但是，路由不是響應式的，從執(zhí)行循序來看，地址欄快于路由的添加，那找不到這個路徑了就只能白屏了，除非設置了404的頁面
那么怎么解決這個問題， 只需要再進行一次攔截就好了，代碼如下：
實測過，這樣已經解決刷新頁面空白的問題了，
同學們可以參考一下，具體問題還是要具體分析
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇在vue中使用v-bind:class的選項卡方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
axios 實現post請求時把對象obj數據轉為formdata
今天小編就為大家分享一篇axios 實現post請求時把對象obj數據轉為formdata，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了在vue項目中封裝echarts的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,下面這篇文章主要給大家介紹了關于vue中vue-router安裝與配置方法的相關資料,需要的朋友可以參考下2022-12-12
解決npm安裝錯誤:No matching version found for&
這篇文章主要介紹了解決npm安裝錯誤:No matching version found for XXX@3.3.6問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本文將詳細介紹Vue表單控件數據綁定方法,需要的朋友可以參考下2020-02-02
詳解如何從零開始搭建Express+Vue開發(fā)環(huán)境
這篇文章主要介紹了詳解如何從零開始搭建Express+Vue開發(fā)環(huán)境，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了使用Vue做一個簡單的todo應用的三種方式的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue項目在打包時,如何去掉所有的console.log輸出
這篇文章主要介紹了vue項目在打包時,如何去掉所有的console.log輸出，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關于如何通過一個簡單的例子學會vuex與模塊化的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11