vue項目實現(xiàn)動態(tài)路由的方式大體可分為兩種:

1.前端這邊把路由寫好，登錄的時候根據(jù)用戶的角色權限來動態(tài)展示路由，(前端控制路由)

2.后臺傳來當前用戶對應權限的路由表，前端通過調接口拿到路由信息后處理(后端處理路由)

這兩種方法各有優(yōu)點，效果都能實現(xiàn)，我們公司現(xiàn)在用的就是第二種，后臺返回路由信息，前端動態(tài)生成路由及菜單。我們就講講實現(xiàn)的邏輯。

我們用動態(tài)路由，需要后臺提供路由信息，那前臺肯定有對應編輯輸入的地方，我們的系統(tǒng)放到菜單里。

父級節(jié)點 父級

節(jié)點ID 自動生成

菜單名稱 菜單名稱

權限標識

圖標 菜單前面的圖標

類型 分為菜單和按鈕

排序

前端組件 組件在項目中的位置

前端地址 瀏覽器路由地址

拿用戶管理來說，

前端組件views/admin/user/index對應我們項目中的

左側菜單調用調用接口請求菜單數(shù)據(jù)返回格式

在index.vue中，調用菜單接口，處理接口返回數(shù)據(jù)，重點在紅圈內

總結，菜單返回的信息要包含router信息，這個信息不能直接使用，需要重新封裝路由，用router.addRoutes(asyncRouters)把路由信息重新添加。

總結

以上是生活随笔為你收集整理的ant design vue input change_Ant-design-vue项目实现动态路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。