vue+springboot动态路由的实现

一.后台处理

1.后台资源表 2.封装成json格式 1.vo 2.把数据封装为嵌套格式，把查找到资源进行转换。

@UtilityClass
public class MenuUtil {
          
   
    public List<DynamicMenuVO> generateMenu(List<DynamicMenuVO> resourceList){
          
   
        List<DynamicMenuVO> menuList=new ArrayList<>();
        for (DynamicMenuVO childrenDynamicMenu:resourceList){
          
   
            //只要不是顶级目录都要寻找其父目录
            if(childrenDynamicMenu.getParentMenuId()!=0){
          
   
                //把其添加到其父目录里
                for (DynamicMenuVO parentDynamicMenu:resourceList){
          
   
                    //找到其父级目录
                    if(childrenDynamicMenu.getParentMenuId()==parentDynamicMenu.getId()){
          
   
                        List<DynamicMenuVO> children = parentDynamicMenu.getChildren();
                        if(children==null){
          
   
                            children=new ArrayList<DynamicMenuVO>();
                        }
                        children.add(childrenDynamicMenu);
                        parentDynamicMenu.setChildren(children);
                    }
                }
            }
        }
        //只返回父级菜单即可
        for (DynamicMenuVO dynamicMenuVO:resourceList){
          
   
            if(dynamicMenuVO.getParentMenuId()==0){
          
   
                menuList.add(dynamicMenuVO);
            }
        }
        return menuList;
    }
}

3.转换后返回的json格式

二.前端处理

1.登录时存储路由 2.生成菜单工具类

const _import = require(../router/_import_development ) //获取组件的方法
import Layout from @/layout //Layout 是架构组件，不在后台返回，在文件里单独引入
import router from ../router

export function generateMenu(data){
          
   
  var getRouter = filterAsyncRouter(data) //过滤路由
  console.log(getRouter)
  router.addRoutes(getRouter) //动态添加路由
  global.antRouter = getRouter //将路由数据传递给全局变量，做侧边栏菜单渲染工作
}
function filterAsyncRouter(asyncRouterMap) {
          
    //遍历后台传来的路由字符串，转换为组件对象
  const accessedRouters = asyncRouterMap.filter(route => {
          
   
    if (route.component) {
          
   
      if (route.component === Layout) {
          
    //Layout组件特殊处理
        route.component = Layout
      } else {
          
   
        route.component = _import(route.component)
      }
    }
    if (route.children && route.children.length) {
          
   
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })

  return accessedRouters
}
}

_import_development.js 3.登陆后跳转第一个路由 4.在layout的sidebar中修改菜单生成方式 5.由于路由是存在global.runter中 所以需要每次更新，在permission.js中设置 至此动态路由已经实现。