vue動(dòng)態(tài)加載路由3種方式

使用場(chǎng)景

后管系統(tǒng)，處理不同角色，不同權(quán)限，顯示不同菜單。

目的

根據(jù)需求，動(dòng)態(tài)加載路由，處理后臺(tái)返回的不同菜單權(quán)限。

方法

方法一：

注冊(cè)所有路由，根據(jù)后臺(tái)返回菜單數(shù)據(jù)，顯示菜單。

弊端：路由全部注冊(cè)，菜單沒(méi)有顯示；用戶可以手動(dòng)更改url值，依然會(huì)顯示當(dāng)前組件。

方法二：

前端手動(dòng)寫好，根據(jù)不同的角色，創(chuàng)建多個(gè)不同的路由，根據(jù)登錄的角色，動(dòng)態(tài)的加載某個(gè)數(shù)組。

弊端：如果后臺(tái)新增角色，那么只有修改前端代碼，重新部署。

方法三（推薦）：

菜單動(dòng)態(tài)生成路由映射

菜單->url->路由->path->component（數(shù)組，routes）

后臺(tái)返回的菜單，有url；url對(duì)應(yīng)的是路由里面的path；path對(duì)面不同的組件。

• 菜單中有加載組件的名稱component（名稱/路徑必須和前端寫好的一致，不可移動(dòng)組件位置）

• （推薦）直接根據(jù)菜單的url。查找前端代碼中的對(duì)應(yīng)關(guān)系。生成數(shù)組routes

注意：

根據(jù)業(yè)務(wù)需求自行選擇

vue動(dòng)態(tài)添加路由后刷新失效

當(dāng)添加路由addRoutes的時(shí)候，正常點(diǎn)擊是沒(méi)問(wèn)題的，但是刷新一次頁(yè)面，那么動(dòng)態(tài)添加的路由就會(huì)失效，

用getRoutes() 打印出來(lái)看的時(shí)候確定路由已經(jīng)添加進(jìn)去了，所以這個(gè)原因應(yīng)該是

當(dāng)你執(zhí)行到addRoutes時(shí)，路由要添加進(jìn)去了，但是，路由不是響應(yīng)式的，從執(zhí)行循序來(lái)看，地址欄快于路由的添加，那找不到這個(gè)路徑了就只能白屏了，除非設(shè)置了404的頁(yè)面

那么怎么解決這個(gè)問(wèn)題， 只需要再進(jìn)行一次攔截就好了，代碼如下：

實(shí)測(cè)過(guò)，這樣已經(jīng)解決刷新頁(yè)面空白的問(wèn)題了，