Maximum call stack size exceeded 报错

• 错误提示的意思大概就是---超出最大调用堆栈大小

• 在浏览器中无论是访问 http://localhost:8080 或者是访问 http://localhost:8080/#/login 都显示空白页面，查看页面信息都是报Maximum call stack size exceeded 错误

• 什么操作引起的这个错误呢？

• 在没有添加路由守卫之前一切正常，代码如下：

// 添加路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转过来
  // next 是一个函数，表示放行
  // next() 放行  next('/login')跳转到登录页面
  // 如果访问的是登录页，直接通过
  if (to.path === 'login') return next()
  // 获取token值, 如果token值不存在直接返回登录页面
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  // 如果存在直接放行
  next()
})

• 一般出现超出最大调用堆栈的情况无非是，递归调用出错，或者是循环条件有问题出现了无限循环，但是代码中没有用到递归和循环，只是在添加了路由守卫代码之后才开始报错，并且根据浏览器访问情况判断是地址跳转的问题，仔细梳理添加的路由拦截代码之后发现代码if (!tokenStr) return next('/login')有问题，需要增加访问登录页面login的判断；于是修改后的代码如下：

// 添加路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转过来
  // next 是一个函数，表示放行
  // next() 放行  next('/login')跳转到登录页面
  // 如果访问的是登录页，直接通过
  if (to.path === 'login') return next()
  // 获取token值, 如果token值不存在直接返回登录页面
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr && to.path !== '/login') return next('/login')
  // 如果存在直接放行
  next()
})

• 经过修改之后页面可以正常访问，所以遇到问题不要慌，慢慢梳理一下代码，和页面逻辑，就能判断出问题的大概位置；然后再找解决办法。