Vue 動態新增路由及生成選單

2021-09-26 15:07:14 字數 1782 閱讀 9100

寫後台管理系統，估計有不少人遇過這樣的需求：根據後台資料動態新增路由和選單。

為什麼這麼做呢？因為不同的使用者有不同的許可權，能訪問的頁面是不一樣的。

在網上找了好多資料，終於想到了解決辦法。

利用 vue-router 的addroutes方法可以動態新增路由。

先看一下官方介紹：

router.addroutes

router.addroutes(routes: array)
動態新增更多的路由規則。引數必須是乙個符合routes選項要求的陣列。

舉個例子：

const router = new router(,


,]   


})
上面的**和下面的**效果是一樣的

const router = new router(,


]   


})router.addroutes([


])
在動態新增路由的過程中，如果有 404 頁面，一定要放在最後新增，否則在登陸的時候新增完頁面會重定向到 404 頁面。

類似於這樣，這種規則一定要最後新增。

假設後台返回來的資料長這樣

// 左側選單欄資料


menuitems: [,,


,,]}


]}


]
來看看怎麼將它轉化為選單欄，我在這裡使用了iview的元件，不用重複造輪子。

}}


}}            


}
**不用看得太仔細，理解原理即可，其實就是通過三次v-for不停的對子陣列進行迴圈，生成**選單。

動態選單這樣就可以實現了。

動態路由，因為上面已經說過了用addroutes來實現，現在看看具體怎麼做。

首先，要把專案所有的頁面路由都列出來，再用後台返回來的資料動態匹配，能匹配上的就把路由加上，不能匹配上的就不加。

最後把這個新生成的路由資料用addroutes新增到路由表裡。

const asyncroutes = ,


't1': ,


'password': ,


'msg': ,


'userinfo': 


}// 傳入後台資料 生成路由表


menustoroutes(menusdata)


// 將選單資訊轉成對應的路由資訊 動態新增


function menustoroutes(data) )


data.foreach(item => )


children.push()


// 最後新增404頁面 否則會在登陸成功後跳到404頁面


result.push(,)


return result


}function generateroutes(children, item)  else if (item.children) )


}}
所有的**實現，我都放在 github 上，動態選單的實現放在這個專案下的src/components/index.vue、src/permission.js和src/utils/index.js下

Vue 動態新增路由及生成選單

寫後台管理系統，估計有不少人遇過這樣的需求 根據後台資料動態新增路由和選單。為什麼這麼做呢？因為不同的使用者有不同的許可權，能訪問的頁面是不一樣的。在網上找了好多資料，終於想到了解決辦法。利用 vue router 的addroutes方法可以動態新增路由。先看一下官方介紹 router.addro...

vue 動態新增路由和動態製作左側導航選單

使用場景 使用者登入後獲取選單列表，然後動態新增路由和選單，實現根據使用者許可權實現動態新增路由。昨天搞了半個晚上一直困惑使用 router.addroutes 在路由 裡，一直問題，今天早上到了公司，諮詢了下老大和乙個前段大佬終於搞定了，直接上 了 login.vue 登入介面 import fr...

vue動態新增路由

通過routers中的addroutes方法動態新增路由 const routeobj routearr.push routeobj this.routers.addroutes routearr 注意 this.routers.addroutes arr 引數是陣列 過程遇到問題 1 重複路由 如...