RangeError: Maximum call stack size exceeded调试找错

过程

最近在用uniapp写一个项目，路由这一方面用的uni-simple-router组件，使用该组件可以用类似vue-router的方式完成路由拦截等操作，但是在初步使用过程中报了RangeError: Maximum call stack size exceeded这样的错误，栈超限了，初步判断可能是路由跳转太多，初始代码如下：

router.beforeEach((to, from, next) => {
  //   console.log(1)
  //   console.log(to)
  
    if (!uni.getStorageSync("token")) {
      console.log(2)
      next({
        name: "Login",
        NAVTYPE: "push",
      })
    }
  } else next()
})

即当无token时，自动跳转到登录界面。
但是在加载登录页的时候，会打印出上百个2，并出现报错。

后来我取消next中的传参（因为已经初步判断是if中出现了问题），发现报错消失，得因此得出结论：
当加载登陆页面时，触发路由守卫判断无token，便会继续进入登录界面，陷入了死循环，超过内存时，产生错误。
因此要再加一层判断，只有当跳转到非Login界面时，才会触发路由守卫

router.beforeEach((to, from, next) => {
  //   console.log(1)
  //   console.log(to)
  if (to.path != "/pages/login/login") {
    if (!uni.getStorageSync("token")) {
      console.log(2)
      next({
        name: "Login",
        NAVTYPE: "push",
      })
    } else {
      next()
    }
  } else next()
})

报错消失。

总结

在产生报错时，要耐心的一步步去查找错误的原因，可以通过打印和修改一些参数等辅助手段（也就是控制变量法）一步步的确定出错的原因，最后修改，然后总结经验教训。

安装

uni-simple-router安装时采用的npm方式，初始uniapp项目没有npm模块，使用 命令行 npm init -y初始化