前言
后台传来当前用户对应权限的路由表(扁平数据),前端通过调接口拿到后处理(后端处理路由)
代码
后端扁平数据
[
{id:1, pId:0, name:'example1', label:'菜单一', path:'/example1', component:'Main', icon:null},
{id:2, pId:0, name:'example2', label:'菜单2', path:'/example2', component:'Main', icon:null},
{id:3, pId:1, name:'table', label:'表格', path:'table', component:'/basic/table/index', icon:null},
{id:4, pId:2, name:'tree', label:'树形菜单', path:'tree', component:'/basic/tree/index', icon:null}
]
路由
[
{
name: 'example1',
path: '/example1',
component: Main,
meta: {
name : '菜单一'
},
children: [
{
name: 'table',
path: '/table',
component: () => import('_v//basic/table/index.vue'),
meta: {
name : '表格'
}
}
]
},
{
name: 'example2',
path: '/example2',
component: Main,
meta: {
name : '菜单2'
},
children: [
{
name: 'tree',
path: 'tree',
component: () => import('_v/basic/tree/index.vue'),
meta: {
name : '树形菜单'
}
}
]
}
]
扁平数据转路由
const createRouter = () => new VueRouter({
mode: 'hash',