console 报错 之 Uncaught (in promise) RangeError: Maximum call stack size exceeded

1. 背景

demo 环境报错。。。

2. 报错问题

3. 问题原因

vue 报错: “RangeError: Maximum call stack size exceeded”

报错通常是由于无限的递归 导致的。当使用 Vue 路由时，如果设置不当，会导致无限的递归，最终导致栈溢出，即 “RangeError: Maximum call stack size exceeded” 报错。
所以结论是需要检查路由设置中是否存在循环依赖或死循环。

4. 实例

const router = new Router({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/product',
      component: Product
    },
    {
      path: '*',
      redirect: '/about'
    }
  ]
});

在上述代码中，如果我们请求一个未定义的路由，它将重定向到 “/about”，而 “/about” 又将被重定向到 “/about”，因此将发生无限循环，最终导致报错。

5. 解决方案

5.1.使用正确的路由路径

需要使用正确的路由路径，确保不会将相同的路径重定向到自身。如果要重定向到 “about” 页面，则应将路径设置为 “/about”，而不是 “about”。

const router = new Router({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/product',
      component: Product
    },
    {
      path: '*',
      redirect: '/about'
    }
  ]
});

5.2. 避免重复声明路由

重复声明路由会导致死循环，因此需要检查代码中是否存在重复路由。如果存在，请删除无用的路由。

const router = new Router({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/product',
      component: Product
    },
    {
      path: '*',
      redirect: '/home'
    }
  ]
});

5.3. 使用命名路由

建议使用命名路由来代替字符串路径。这样可以避免拼写错误，并使代码更加易于维护。

const router = new Router
({
routes: [
{
path: ‘/home’,
component: Home,
name: ‘home’
},
{
path: ‘/about’,
component: About,
name: ‘about’
},
{
path: ‘/product’,
component: Product,
name: ‘product’
},
{
path: ‘*’,
redirect: { name: ‘home’ }
}
]
});

6. 其他情况

• 无限递归：当一个函数不断调用自身，没有终止条件，就会导致调用栈溢出。
• 循环引用：如果对象A引用对象B，对象B引用对象A，形成一个循环引用，当对象A或对象B被销毁时，会导致调用栈溢出。
• 函数调用层级过深：当函数调用层级过深，超过了调用栈的最大深度，也会导致调用栈溢出。