Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)

前言

后台传来当前用户对应权限的路由表（扁平数据），前端通过调接口拿到后处理(后端处理路由)

代码

后端扁平数据

[
  {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',