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.vuesrc/permission.jssrc/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 重複路由 如...