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中设置
至此动态路由已经实现。

本文地址：https://blog.csdn.net/qq_36185997/article/details/107359621