一、请求后端，获取路由数据，处理数据，然后放进router中

下边是一个请求后端获取数据后，处理数据的一个函数：
函数的目的是：1）额外添加meta信息；2）配置component；3）后端返回来的数据处理成想要的嵌套路由格式

// 想要的嵌套路由格式
[
  {
    path: 'user',
    component: User,
    children: [
      {
        path: 'profile',
        name: 'profile'
        component: ()=> import("@/views/profile.vue"),
        meta:{
            title:'介绍',
            icon:'el-icon-location',
            ismenu:1
        }
      },
    ],
  },
]

1）需要提供一个空的default .vue文件, 只写了<router-view></router-view>入口
2）在动态导入 component组件时， 需要根据情况判断，组件为空的时候，导入default.vue

// 处理后端返回的数据格式
export function handleroutes(arr){
  let newArr = [];
    for(let item of arr){
      let obj = {}
      obj.meta = {}
  
      if(item.pid==0){
        obj.path =  item.name
      }else{
        obj.path = item.name
      }
      
      obj.name = item.name
      obj.meta.title = item.title
      obj.meta.icon = item.icon
      obj.meta.ismenu = item.ismenu
      //所以要改成以下方法
      //定义一个函数
      const comp = import.meta.glob(`../views/*/*.vue`);
      if(item.route){
        obj.component = comp[`../views/${item.route}.vue`];
      }else{
        obj.component = comp[`../views/default/index.vue`];
      }
     
      if(item.children){
        obj.children = handleroutes(item.children)
        newArr.push(obj)
      }else{
        newArr.push(obj)
      }
    }
    if(newArr.length==0){
        return null;
    }
    return newArr
}
// 在beforeEach中把处理后的路由加入到默认路由数据中
import mainRoutes from "./mainRoutes";
router.beforeEach( (to, from, next) => {
	/*
	*	... 再此进行路由跳转判断、过滤路由处理等等
	*/
	//在请求成功后，进行格式处理
	 getRoutes().then(res=>{
	 	if(res.code==0){
	 		//  objarr 就是上面最开始想要的数据结构了
			const objarr = handleroutes(filterRoute);
			objarr.forEach(item=>{
				// 把请求来的数据放进路由中
	           	mainRoutes.children.push(item);
	           	// 为了生成左侧菜单菜单
	            router.addRoute('AppMain', item);
	        })
		}
	 })
}

路由文件结构如图：