页面白屏本质是路由导航被挂起，根本原因是守卫中next()调用延迟或缺失；须确保每条执行路径都显式、唯一调用next()，异步操作需try/catch+finally兜底，并设置超时机制与错误监听。
页面白屏不是卡死，而是路由导航被挂起——根本原因是守卫中 next() 调用延迟或缺失，导致 Vue Router 或类似框架的导航状态机停滞在“等待放行”阶段。这不是 UI 渲染失败，而是路由流程主动暂停。规避关键在于让守卫响应及时、确定、可预期。
所有分支路径必须显式调用 next()
守卫函数里不能有“可能不执行 next()”的逻辑。常见陷阱是条件判断后只在某个分支里调用 next()，其他路径静默退出。
- 错误写法：
if (to.meta.auth && !user.token) { next('/login') }—— 缺少else { next() }，非受保护路由直接卡住 - 正确做法：每个
if/else if分支末尾都带next()；或统一收口，例如在函数末尾加return next()（前提是前面没提前返回） - 更稳妥的方式：用
switch或提前 return，确保每条执行路径都有且仅有一次next()
异步操作必须包裹在 try/catch + finally 中
权限校验、token 刷新、接口请求等异步逻辑，一旦 Promise 被 resolve/reject 后未处理，next() 就永远不会触发。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 错误写法：
checkAuth().then(valid => valid && next()).catch(() => next('/login'))——valid为 false 时next()不执行 - 正确写法：用
async/await+finally，或确保.then()和.catch()都调用next() - 示例：
try { const valid = await checkAuth(); if (!valid) return next('/login'); } finally { next(); }
设置守卫超时机制，防止单点阻塞
即使逻辑正确，网络抖动或后端延迟也可能让 next() 拖得太久。加入硬性超时兜底，避免用户无限等待。
- 在守卫开头启动计时器：
const timeout = setTimeout(() => next(), 8000) - 在所有正常路径结尾清除它：
clearTimeout(timeout) - 配合 loading 状态提示（如全局过渡动画），让用户感知“正在处理”，而非误判为崩溃
优先使用 router.onError() 捕获静默异常
某些未捕获的 Promise rejection 或同步报错会中断守卫执行，但不抛到控制台。启用错误监听能第一时间发现这类问题。
- 在路由初始化后添加：
router.onError((error) => console.error('Router guard error:', error)) - 配合 Vue Devtools 的 Navigation 标签页，观察导航是否卡在 “waiting for next” 状态
- 上线前可在守卫首行加
console.log(to.path, 'guard start')，确认是否进入、是否完成
