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’ }
}
]
});