页面路由流转图

类型: 前端工程  |  标签: 路由分析 页面跳转 路由守卫 SVG

提示词

分析路由配置文件（如 router/index.ts 或类似路由表定义），梳理全站的页面流转逻辑。

## 节点与连线
- 每个路由页面作为一个节点，箭头指向代表跳转方向，连线上需注明跳转方式（声明式链接、编程式导航或重定向）

## 守卫标注
- 对挂载了路由守卫（BeforeEach / Guards）的路由节点或全局拦截点，使用不同颜色进行高亮区分

## 输出
- 保存为 ./docs/route-flow.svg

适用场景

• 权限设计审查：守卫挂在了正确的节点上吗？有没有本该拦截却漏掉的页面
• 搭建站点地图：产品或设计需要一张完整的页面导航图
• 重定向治理：历史遗留的重定向链（A→B→C→D）需要清理
• 嵌套路由排查：子路由和父路由的守卫关系是否按预期工作

最佳实践

1. 守卫颜色编码：全局守卫用红色高亮，路由级守卫用橙色，不做处理用常规色
2. 标记跳转方式：声明式 <Link>、编程式 router.push、重定向 redirect 三种用不同箭头样式
3. 标注重定向链：A → B → C → D 的长链是技术债，在图里一眼可见
4. 嵌套路由展开：嵌套路由的子节点同样画出流转关系，不要缩略为一个节点
5. 结合权限守卫图：路由流转图管"能从哪到哪"，权限守卫图管"谁不能到哪"