不灭的焱

革命尚未成功,同志仍须努力 下载Java

作者:AlbertWen  添加时间:2026-03-10 16:28:33  修改时间:2026-03-10 20:14:09  分类:02.前端/Vue/Node.js  编辑

我先在工程里定位左侧导航的菜单配置和渲染逻辑,确认排序是在前端静态处理、接口返回顺序,还是路由生成阶段完成。

已经定位到这套项目的导航不是单纯写死在 routes.ts,更像是“静态路由骨架 + 登录后按权限菜单数据渲染”。我继续看用户权限菜单是怎么进入布局组件,以及中间有没有显式 sort。

前端这边目前还没看到对左侧菜单做任何显式排序;下一步我查 sortNumber 在工程里的实际使用点,以及 getUserInfo 返回的 authorities 是不是已经按顺序给好。

核心判断基本出来了,但我还要确认第三方 toTree 有没有偷偷按某个字段排序。这个点决定最终结论是“后端顺序直传”还是“前端按默认字段重排”。

我已经确认第三方布局库也没有额外排序逻辑。现在补一下关键代码行号,给你一个可以直接落结论的链路。

 

结论先说:当前这个前端工程里,左侧导航没有在前端按某个字段做显式排序

它的处理链路是:

  1. 登录后从 /auth/user 取回 userInfo.authorities,过滤掉按钮权限 menuType === 1,然后用 toTree 构树。src/store/modules/user.ts (line 33) src/store/modules/user.ts (line 35)
  2. 构树只用 menuId 和 parentId 这两个字段来确定父子关系,不做 sort()。src/store/modules/user.ts (line 37) src/store/modules/user.ts (line 38)
  3. toTree 的实现也是 data.forEach(...) 后 result.push(...),说明它是保留原数组顺序挂成树,不会按某个字段重新排。core.js (line 1) core.js (line 26) core.js (line 60)
  4. 最后菜单直接传给布局组件 ele-pro-layout 渲染,中间也没排序逻辑。src/layout/index.vue (line 2) src/layout/index.vue (line 3)

所以更准确地说:

  • 左侧导航的“层级关系”是根据 menuId + parentId
  • 左侧导航的“同级顺序”是根据 /auth/user 返回的 authorities 原始顺序
  • 前端没有按 sortNumber 做排序

不过菜单模型里确实有一个排序字段 sortNumber。src/api/system/menu/model/index.ts (line 18)

因此如果你现在看到左侧导航像是按排序号排好的,那大概率是:

  • 后端在返回 /auth/user 的 authorities 时,已经按 sortNumber 排好了
  • 前端只是按返回顺序展示