Uni-App 页面跳转监控实战：快速定位路由问题
一.在做 Uni-App 小程序开发时，路由跳转是很常见的操作，比如 uni.navigateTo、uni.reLaunch 等。但有时候，我们会遇到一些奇怪的问题：
页面一打开，就莫名其妙跳回首页
业务逻辑正确，但路由被拦截器或全局逻辑改写
无法快速定位，到底是哪个页面或组件触发了跳转
这种时候，如果能在全局“监控”所有路由调用，就能快速找到问题源头。下面就带大家实现一个全局路由监控工具。
二.原理：函数劫持（Monkey Patch）
思路很简单：
保存原始方法，比如
uni.navigateTo。用自定义函数替换它。
在自定义函数里，先打印日志（方法名、参数、堆栈），再执行原函数。
这样，每次调用路由方法时，都会经过我们的“代理函数”，相当于全局插了一层日志
三. 实现代码
在 App.vue 的 onLaunch 中加入以下代码：
onLaunch(() => {// 封装一个包装函数，用来代理 uni 的路由方法const wrap = (name: keyof typeof uni) => {// 保存原始方法const raw = (uni as any)[name]// 覆盖原方法;(uni as any)[name] = function (...args: any[]) {// 打印调用信息console.log(`[NAV] 调用了 ${name}`, args)// 打印调用堆栈，方便定位调用来源try {throw new Error(`[NAV STACK] ${name}`)} catch (err) {console.warn(err)}// 调用原始方法，保持功能不变return raw.apply(this, args)}}// 批量给常见的路由方法加代理;['navigateTo', 'redirectTo', 'reLaunch', 'switchTab', 'navigateBack'].forEach(wrap)
})
四. 效果演示
当某个地方调用了：
uni.reLaunch({ url: '/pages/index/index' })
控制条输出
[NAV] 调用了 reLaunch [ { url: '/pages/index/index' } ]
Error: [NAV STACK] reLaunch
at App.vue:25
at routeInterceptor.ts:38
at ...
不仅能看到调用了什么方法、传了什么参数，还能追踪到具体的调用堆栈，快速定位是哪个文件写的。
五. 使用场景
🔍 调试拦截器：验证是否正确拦截、是否跳错页面。
🐞 排查 Bug：解决“页面秒回首页”“路由失效”等问题。
📊 埋点统计：统计用户真实的路由行为（可拓展上报服务器）。
六. 总结
通过简单的函数代理，我们就能轻松实现 全局路由监控。
优点是：
无侵入，不需要改业务代码。
实时可见，能直接看到参数和调用堆栈。
扩展方便，可以加日志上报、埋点统计。