unplugin-vue-router 数据加载器中的 pendingLoad 空指针问题解析

在 unplugin-vue-router 项目中，开发者在使用数据加载器(data-loader)功能时可能会遇到一个隐蔽的错误："Cannot read properties of null (reading 'then')"。这个问题通常发生在特定导航场景下，特别是当页面加载失败后尝试重新导航时。

问题本质

该错误的根源在于数据加载器的内部状态管理。当使用 defineBasicLoader 定义的数据加载器抛出异常，并且随后尝试重新导航到相同路由时，pendingLoad 属性可能变为 null，导致后续的 Promise 操作失败。

典型触发场景

1. 页面A导航到页面B
2. 页面B的数据加载器抛出异常
3. 应用捕获错误并显示错误界面
4. 用户点击"重试"按钮尝试重新导航到页面B
5. 此时 pendingLoad 为 null，触发错误

技术细节分析

在底层实现中，数据加载器维护了一个状态对象 entry，其中包含 pendingLoad 属性。正常情况下，pendingLoad 应该是一个 Promise 对象，但在某些导航场景下，特别是重复导航到相同路由时，这个属性可能被意外置为 null。

解决方案与最佳实践

1. 避免重复导航：检查当前路由是否已经是目标路由，如果是则跳过导航
2. 错误处理改进：在全局路由错误处理中，确保不会触发到相同路由的重复导航
3. 条件渲染优化：避免在错误处理中完全卸载 RouterView，考虑使用错误边界组件
4. 状态重置：在重新导航前，确保重置相关状态

代码示例

// 改进后的错误处理示例
router.onError((error) => {
  if (isSameRoute(router.currentRoute.value, error.to)) {
    return // 避免重复导航到相同路由
  }
  showErrorPage()
})

总结

这个问题揭示了在 SPA 应用中处理异步数据加载和路由导航时需要特别注意状态一致性。开发者应当特别注意：

1. 数据加载器的错误边界处理
2. 重复导航的场景防御
3. 全局状态与局部状态的同步

通过理解这些底层机制，可以构建更健壮的路由和数据加载架构，避免类似的运行时错误。