vue中的动态路由

1. 请求接口

	function myRoutes(){
		  let token = localStorage.getItem("token");
		  let result = [];
		  console.log(token);
		  let data = {
		    url: "sys/menu/nav",
		    method: "get",
		    headers:{"token": token},
		    params:{}
		  };
		  return  request(data);
	}

2. 处理接口（根据实际数据来），处理成需要的路由数据

	function getArr(arr){
	  let narr = []
	  for(let i=0;i<arr.length;i++){
	    if(arr[i].list.length!=0){
	      let temp = getArr(arr[i].list)
	      narr.push({
	        path:'/'+arr[i].url,
	        name:arr[i].url,
	        component: () => import("@/components/"+arr[i].url),
	        meta:{title:arr[i].name},
	        children:temp,
	        redirect:'/'+arr[i].list[0].url
	      })
	    }else{
	      narr.push({
	        path:'/'+arr[i].url,
	        name:arr[i].url,
	        meta:{title:arr[i].name},
	        component: () => import("@/components/"+arr[i].url),
	        children:arr[i].list,
	      })
	    }
	  }
	  return narr;
	}

3. 拿到数据，数据动态绑定到路由上

	async function getRoutes(){
	  try{
	    let res = await myRoutes();
	    res.menuList[0].url = 'Home';
	    routes.push(getArr(res.menuList)[0]);
	    router.addRoutes(routes);
	  }catch(err){
	    console.log(err)
	  }
	}

4. 调用方法

	getRoutes();
	const router = new Router({
	  routes,
	})

a. …最后就是还要数据持久化，把动态路由以及路由的权限存储起来