vue动态生成路由菜单

1.整体思路：
先在前端配置好整体路由文件，静态动态分别用文件存储->
根据后台返回的路由名称数组[“角色管理”]去解析生成路由配置文件->
将解析出的文件加载到router上面->
根据router生成菜单项

2.手撸的代码（内网开发，你懂的），有些地方不是很详细，或者有编码错误，但核心思路和代码都是详细的，还望见谅！

①router文件夹下放2个文件：index. js（放置基础的路由信息）和roleRoute. js（放置需要权限分配的路由）

②index.js文件如下：
import Vue from ‘vue’
import Router from ‘vue-router’
Vue.use(Router)
export const routerMap=[
{path:’/’,name:‘root’,redirect:‘login’},
{path:‘login’,name:‘login’,component: ()=>import("@/views/login")}
]
export default new Router({
routes:routerMap
})

③roleRouter.js文件如下
const createOrderIter = function*(start =0 ,end = Infinity,step=1){
for(let i=start;i<end;i+=step){
yield i
}
}
const getOrderIterator=createOrderIter()
const getOrder=function(){
return getOrderIterator. next().value
}
export default {
menuConfig:{
基础信息管理:{
pages:[“用户管理”,“角色管理”],
icon:“el-icon-s-home”,
order:getOrder()
}
},
funcConfig:{
用户管理:{
path:“user”,meta:{“el-icon-user”,order:getOrder()},name:user,component:()=>import("@/views/user");
角色管理: ……
}
}
}
④在拿到后端的路由名称数组后[“用户管理”]，进行解析，并加入到当前路由文件中。
这里我新建了一个loginStore. js
在mutations:{
SET_ROUTE(state,value){
state. routes=createRoutes(value)
routeReset(state.routes);
pushFirstChild(state.routes)
}
}
三个方法写在另外一个setRoute.js文件中
import VueRouter from “vue-router”
import router from “@/route”
import roleRoute from “@/router/roleRoute”
//这个文件就是前面的路由配置文件
const oriRoute =function (routes){
return [{path:"/",name:“route”,component=>import("@/views/layout/layout"),redirect:“login”,children:routes},
{path:"/login",name:“login”,component=>import("@/views/login")}
]
}
const createRoutes=function(value){
let routes = []
const keys=[]
value.forEach(item=>{
if(roleRoute.funcConfig[item]){
routes. push(roleRoute.funcConfig[item])
keys. push(item)
}
})
sessionStorage. setItem(“routes”,JSON.stringify(keys))
routes =orderBy(routes) //根据order进行排序
return oriRoutes(routes)
}
const routeReset()=function(routes=oriRoutes([])){
const newRouter= new VueRouter({routes})
router. matcher=newRouter. matcher
}
const pushFirstChild=function (routes){
route. push(routes[0].children[0].name)
}
export {createRoutes,routeReset,pushFirstChild}
⑤登录退出的时候执行
this. $store. push(“login”)
⑥根据路由去生成菜单点击页，不同项目菜单格式不同，根据router去对应生成就好。