vue+springboot动态路由的实现

最新推荐文章于 2025-04-02 09:57:59 发布

守拙的小黑

最新推荐文章于 2025-04-02 09:57:59 发布

阅读量2.7k

点赞数 2

文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qq_36185997/article/details/107359621

版权

本文详细介绍了如何在Vue和SpringBoot项目中实现动态路由。首先，后台通过资源表封装成JSON格式，将数据转换为嵌套结构并返回。接着，前端在登录时存储路由，并使用生成菜单工具类导入开发配置。登录后跳转到第一个路由，并在布局的侧边栏中动态生成菜单。最后，在permission.js中设置更新路由，完成动态路由的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.后台处理

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){
   
                //把其添加到其父目录里