后端代码返回子路由配置信息显示错误

Question

后端代码返回子路由配置信息显示错误

我现在返回json数据是这样的

{
    "code": 1000,
    "message": "successful",
    "data": [
        {
            "path": "/",
            "name": "index",
            "component": "/index/Index.vue",
            "children": [
                {
                    "path": "/test",
                    "name": "test",
                    "component": "/test.vue",
                    "children": [
                        {
                            "path": "/test1",
                            "name": "test1",
                            "component": "/test1.vue"
                        }
                    ]
                }
            ],
            "meta": {
                "title": "江西工业职业技术学院"
            }
        },
        {
            "path": "/news/newsList",
            "name": "newsList",
            "component": "/news-list/NewsList.vue",
            "meta": {
                "title": "江西工业职业技术学院-新闻列表"
            }
        },
        {
            "path": "/news/newsContent",
            "name": "newsContent",
            "component": "/content/Content.vue",
            "meta": {
                "title": "江西工业技术学院-新闻详情"
            }
        },
        {
            "path": "/admin",
            "name": "admin",
            "component": "/admin/index/Index.vue",
            "meta": {
                "title": "后台管理系统-首页"
            }
        },
        {
            "path": "/admin/student/studentList",
            "name": "studentList",
            "component": "/admin/student/StudentList.vue",
            "meta": {
                "title": "后台管理系统-学生列表"
            }
        },
        {
            "path": "/admin/grade/gradeList",
            "name": "gradeList",
            "component": "/admin/grade/GradeList.vue",
            "meta": {
                "title": "后台管理系统-班级列表"
            }
        },
        {
            "path": "/admin/college/collegeList",
            "name": "collegeList",
            "component": "/admin/college/CollegeList.vue",
            "meta": {
                "title": "后台管理系统-学院列表"
            }
        },
        {
            "path": "/admin/major/majorList",
            "name": "majorList",
            "component": "/admin/major/MajorList.vue",
            "meta": {
                "title": "后台管理系统-专业列表"
            }
        },
        {
            "path": "/test",
            "name": "test",
            "component": "/test.vue",
            "children": [
                {
                    "path": "/test1",
                    "name": "test1",
                    "component": "/test1.vue"
                }
            ]
        },
        {
            "path": "/test1",
            "name": "test1",
            "component": "/test1.vue"
        }
    ]
}

children字段有重复，并且子路由的meta跟父路由的meta属性完全一模一样时就只显示父路由的meta，我的Java代码是这样写的

@Service
@Slf4j
public class RouterServiceImpl implements RouterService {

    @Resource
    private RouterMapper routerMapper;

    @Resource
    private MetaMapper metaMapper;

    @Override
    public List<RouterDto> getRouter(Integer jurisdictionId) {
        if (NumberUtil.isEmpty(jurisdictionId)) {
            throw new CustomException(ResultEnum.notParamError.getCode(),ResultEnum.notParamError.getMessage());
        }
        if (jurisdictionId <= 0) {
            jurisdictionId = 5;
        }
        List<RouterDto> routerDtoList = routerMapper.getRouter(jurisdictionId);
        List<Integer> metaIds = new ArrayList<>();
        for (int i = 0; i < routerDtoList.size(); i++) {
            RouterDto routerDto = routerDtoList.get(i);
            if (!ObjectUtil.isEmpty(routerDto) && !NumberUtil.isEmpty(routerDto.getParentId()) && !Objects.equals(routerDto.getParentId(),StatusCode.status.getCode())) {
                // 获取父路由
                RouterDto parentRouter = this.getParentRouter(routerDtoList, routerDto.getParentId());
                if (!ObjectUtil.isEmpty(parentRouter)) {
                    // 创建一个新的list保存子路由
                    List<RouterDto> children = new ArrayList<>();
                    children.add(routerDto);
                    // 删除多余的当前元素         这一段不加就是上面json显示的样子，加了也只是去掉了上面json的test那一个并且children还少了，就像下面的json一样
                    routerDtoList.remove(i);
                    // 设置子路由进父路由
                    parentRouter.setChildren(children);
                }
            }
            metaIds.add(routerDto.getMetaId());
        }
        List<Meta> batchMetaById = metaMapper.getBatchMetaById(metaIds);
        for (int i = 0; i < routerDtoList.size(); i++) {
            RouterDto routerDto = routerDtoList.get(i);
            if (i < batchMetaById.size()) {
                routerDto.setMeta(batchMetaById.get(i));
            }
        }
        return routerDtoList;
    }

    /**
     * 获取父路由
     * @param routerDtoList 路由列表
     * @param parentId 子路由的父路由id
     * @return 父路由
     * @author guli
     * @date 2023-10-23
     */
    private RouterDto getParentRouter(List<RouterDto> routerDtoList,Integer parentId) {
        for (int i = 0; i < routerDtoList.size(); i++) {
            RouterDto routerDto = routerDtoList.get(i);
            if (Objects.equals(routerDto.getId(), parentId)) {
                return routerDto;
            }
        }
        return null;
    }

}

写了删除当前路由的那段代码的json结果

{
    "code": 1000,
    "message": "successful",
    "data": [
        {
            "path": "/",
            "name": "index",
            "component": "/index/Index.vue",
            "children": [
                {
                    "path": "/test",
                    "name": "test",
                    "component": "/test.vue"
                }
            ],
            "meta": {
                "title": "江西工业职业技术学院"
            }
        },
        {
            "path": "/news/newsList",
            "name": "newsList",
            "component": "/news-list/NewsList.vue",
            "meta": {
                "title": "江西工业职业技术学院-新闻列表"
            }
        },
        {
            "path": "/news/newsContent",
            "name": "newsContent",
            "component": "/content/Content.vue",
            "meta": {
                "title": "江西工业技术学院-新闻详情"
            }
        },
        {
            "path": "/admin",
            "name": "admin",
            "component": "/admin/index/Index.vue",
            "meta": {
                "title": "后台管理系统-首页"
            }
        },
        {
            "path": "/admin/student/studentList",
            "name": "studentList",
            "component": "/admin/student/StudentList.vue",
            "meta": {
                "title": "后台管理系统-学生列表"
            }
        },
        {
            "path": "/admin/grade/gradeList",
            "name": "gradeList",
            "component": "/admin/grade/GradeList.vue",
            "meta": {
                "title": "后台管理系统-班级列表"
            }
        },
        {
            "path": "/admin/college/collegeList",
            "name": "collegeList",
            "component": "/admin/college/CollegeList.vue",
            "meta": {
                "title": "后台管理系统-学院列表"
            }
        },
        {
            "path": "/admin/major/majorList",
            "name": "majorList",
            "component": "/admin/major/MajorList.vue",
            "meta": {
                "title": "后台管理系统-专业列表"
            }
        },
        {
            "path": "/test1",
            "name": "test1",
            "component": "/test1.vue"
        }
    ]
}

Answer 1

【以下回答由 GPT 生成】

首先，从你提供的JSON数据中可以看到，子路由配置信息存储在一个名为"data"的数组中。而每个路由又包含了 "path"，"name"，"component"等属性。因此，我们可以通过遍历JSON数据中的每个子路由并动态创建路由来使用这些信息。

下面是解决该问题的步骤：

1. 首先，根据给定的JSON数据，你需要先将其解析为JavaScript对象。这可以通过JSON.parse()方法实现。示例代码如下：

const jsonData = JSON.parse(yourJsonData);

1. 接下来，使用Vue Router的addRoutes()方法动态添加子路由配置。示例代码如下：

const router = new VueRouter();

jsonData.data.forEach(route => {
  // 创建一个用于存储路由的变量
  let routes = [];

  // 添加基础路由配置
  routes.push({
    path: route.path,
    name: route.name,
    component: () => import(route.component),
    meta: {
      title: route.meta.title
    }
  });

  // 如果该路由有子路由，则添加子路由配置
  if (route.children) {
    route.children.forEach(childRoute => {
      routes.push({
        path: childRoute.path,
        name: childRoute.name,
        component: () => import(childRoute.component),
        meta: {
          title: childRoute.meta.title
        }
      });
    });
  }

  // 将路由添加至Vue Router中
  router.addRoutes(routes);
});

1. 最后，将Vue Router实例挂载到Vue应用中。示例代码如下：

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

以上即为解决该问题的具体步骤和代码示例。请注意，上述代码中使用了动态import语法来异步加载路由组件，这可以使你的应用在需要时才下载对应的组件文件，从而提高应用的性能。

另外，为了确保路由组件能够正常渲染，请保证你的路由组件文件路径是正确的。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^