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