寫後台管理系統，估計有不少人遇過這樣的需求：根據後台資料動態新增路由和選單。
為什麼這麼做呢？因為不同的使用者有不同的許可權，能訪問的頁面是不一樣的。
在網上找了好多資料，終於想到了解決辦法。
利用 vue-router 的addroutes方法可以動態新增路由。
先看一下官方介紹：
router.addroutes
router.addroutes(routes: array)routes選項要求的陣列。
舉個例子：
const router = new router(,
,]
})
const router = new router(,
]
})router.addroutes([
])
類似於這樣，這種規則一定要最後新增。
// 左側選單欄資料
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) )
}}
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 重複路由 如...