Lesson 06 · 路由与窗口

路由、菜单、守卫与多窗口

「为什么我进不去这个页面」「为什么点了弹确认框」——答案都在这一课。

为什么排在这个位置

前四课都在讲「一个页面内部」。这一课讲页面之间：谁能进、怎么进、进的时候被拦了什么。

排在第 6 位是因为它是排障的第二大来源 —— 用户报的问题里，「打不开」「点了没反应」有相当一部分根本不是业务逻辑，是守卫或窗口的事。

前置

• 课 01 —— 三个进程的边界，IPC 是什么
• 功能点清单 —— 完整路由表已经列好了，这一课讲它背后的机制

会讲什么

1. 路由表的两段结构。ConstantRouterMap（登录页等，静态）vs DynamicRouterMap（业务页，登录后注册），src/router/index.ts
2. generateRoutes() 到底做了什么。src/store/modules/permission.ts:37-56 —— 只是 clone 一遍加个 404，零权限过滤。为什么「菜单看不见」≠「进不去」
3. 菜单是怎么画出来的。meta.showMenu（components/Menu/src/Menu.vue:47）和 meta.hidden（Menu/src/helper.ts:25）分别由谁消费 —— 为什么所有 *_edit 路由两个都写了
4. 守卫的四件事。src/permission.ts 的 beforeEach：多窗口分流 docView()、CONFIRM_ROUTES 拦截、_edit 页离开确认、token 检查
5. 守卫里的 next() 重复调用问题。needConfirm 分支调完 next(false) 没有 return，后面继续跑
6. 多窗口。表编辑页发 create-smallWin（views/GameEditor/Expert/index.vue:238）→ 主进程 createSmallWindow() → 会话靠 transfer-session-data IPC 传过去 → 小窗里的守卫走 docView() 分支
7. Dashboard 弹窗式功能。GM 工具和地图转换不是路由，排障时怎么定位这类「地址栏不变」的功能
8. 三档评级。hash 路由（✅ 桌面应用的合理选择）、零过滤的 generateRoutes（⚠️）、smallWindow 变量被覆写（❌）、小窗 setWindowOpenHandler 解构错字段（❌）

学完之后你应该能

• 拿到「某某进不去某页面」的报障，能在三分钟内判定是守卫、菜单配置还是权限
• 能给项目加一个新页面，并让它正确出现在菜单里
• 看到地址栏不变的功能，知道去 Dashboard 的 import 列表里找
• 理解为什么前端的「隐藏」不等于「授权」，能跟人说清楚这件事

在正文出来之前，你可以先做这些

• 打开 src/router/index.ts，找到 /game 那一段，数一下有多少个 *_edit 路由 —— 它们都同时写着 showMenu: true 和 hidden: true
• 在应用里手敲一个菜单上没有的 hash 地址（比如 #/base/baseHome），观察你能进去 —— 这就是零权限过滤的直接证据
• 在 /expert/* 之间跳转到表编辑页，观察确认框弹出来
• 打开 src/permission.ts，把 beforeEach 整个读一遍，画出它的分支