Uni-App 页面跳转监控实战：快速定位路由问题

一.在做 Uni-App 小程序开发时，路由跳转是很常见的操作，比如 `uni.navigateTo`、`uni.reLaunch` 等。但有时候，我们会遇到一些奇怪的问题：

页面一打开，就莫名其妙跳回首页
业务逻辑正确，但路由被拦截器或全局逻辑改写
无法快速定位，到底是哪个页面或组件触发了跳转

这种时候，如果能在全局"监控"所有路由调用，就能快速找到问题源头。下面就带大家实现一个全局路由监控工具。

二.原理：函数劫持（Monkey Patch）

思路很简单：

保存原始方法 ，比如 uni.navigateTo。
用自定义函数替换它。
在自定义函数里，先打印日志（方法名、参数、堆栈），再执行原函数。

这样，每次调用路由方法时，都会经过我们的"代理函数"，相当于全局插了一层日志

三. 实现代码

在 App.vue 的 onLaunch 中加入以下代码：

javascript 复制代码

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：解决"页面秒回首页""路由失效"等问题。
📊 埋点统计：统计用户真实的路由行为（可拓展上报服务器）。

六. 总结

通过简单的函数代理，我们就能轻松实现 全局路由监控 。

优点是：

无侵入，不需要改业务代码。
实时可见，能直接看到参数和调用堆栈。
扩展方便，可以加日志上报、埋点统计。