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被销毁时,会导致调用栈溢出。
  • 函数调用层级过深:当函数调用层级过深,超过了调用栈的最大深度,也会导致调用栈溢出。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yolov8 目标检测快速streamlit可视化界面

参考: https://github.com/ultralytics/ultralytics/blob/2330caa50a8a8e0bb61408df8dca0721fb350dbe/ultralytics/solutions/streamlit_inference.py 版本: ultralytics 8.2.27 # Ultralytics YOLO 🚀, AGPL-3.0 licen…

网络安全--计算机网络安全概述

文章目录 网络信息系统安全的目标网络安全的分支举例P2DR模型信息安全模型访问控制的分类多级安全模型 网络信息系统安全的目标 保密性 保证用户信息的保密性,对于非公开的信息,用户无法访问并且无法进行非授权访问,举例子就是:防…

用StartAI文生图做电商设计 AI服装面料设计教程

AI电商设计需要考虑以下多个问题,面面俱到即可小成本做电商 步骤:电商选品确定文生图关键 理解面料特性:了解不同面料的特性,如透气性、弹性、耐用性等,以便更好地利用AI进行设计。色彩搭配:利用AI分析流…

java项目总结2

3.了解Java的内存分配 4.重载 定义:在一个类中,有相同名的,但是却是不同参数(返回类型可以不一样) 重载的优点: 1.减少定义方法时使用的单词 2.减少调用方法时候的麻烦(比如sum的返回两个数的…

《UDS协议从入门到精通》系列——图解0x84:安全数据传输

《UDS协议从入门到精通》系列——图解0x84:安全数据传输 一、简介二、数据包格式2.1 服务请求格式2.2 服务响应格式2.2.1 肯定响应2.2.2 否定响应 Tip📌:本文描述中但凡涉及到其他UDS服务的,将陆续提供链接跳转方式以便快速了解他…

以太坊DApp交易量激增83%的背后原因解析

引言 最近,以太坊网络上的去中心化应用程序(DApp)交易量激增83%,引发了广泛关注和讨论。尽管交易费用高达2.4美元,但以太坊仍在DApp交易量方面遥遥领先于其他区块链网络。本文将深入探讨导致这一现象的主要原因&#…

机器人控制系列教程之Delta机器人奇异性分析

并联机器人奇异性 对于并联机构的奇异性问题比串联机构复杂。某些位形机构会失去自由度,某些位形机构会出现不可控自由度。其分析方法主要有几何法和代数法, 几何法: 即根据高等空间相关知识和机构中角度范围、干涉条件等推导出机构的奇异位…

力扣Hot100-19删除链表的倒数第n个节点(双指针)

给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 示例 1: 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5]示例 2: 输入:head [1], n 1 输出:[]示例 3:…

OpenCV 图像最小外包围矩形的绘制及长短边的计算

目录 一、概述 1.1意义 1.2应用 二、代码实现 三、实现效果 3.1原始图像 3.2处理后图像 3.3数据输出 一、概述 最小外包围矩形(Minimum Bounding Rectangle, MBR)在计算机视觉和图像处理中的意义和应用非常广泛。它是指能够完全包围目标的最小矩…

phpexcel导入导出

前言&#xff1a; 如果你到处的excel软件打开有问题&#xff0c;下面有介绍解决办法 导入 1. composer init 初始化 2. 下载phpspreadsheet 这里需要注意php版本&#xff0c;需要大于7.2 composer require phpoffice/phpspreadsheet3. 编写代码 <?php require vendo…

WPF 3D绘图 点云 系列五

基本概念:点云是某个坐标系下的点的数据集。 可能包含丰富的信息,包括三维坐标X,Y,Z、颜色、分类值、强度值、时间等等 点云可以将现实世界原子化,通过高精度的点云数据可以还原现实世界。万物皆点云。 通过三维激光扫描仪进行数据采集获取点云数据,其次通过二维影像进行…

Java | Leetcode Java题解之第213题打家劫舍II

题目&#xff1a; 题解&#xff1a; class Solution {public int rob(int[] nums) {int length nums.length;if (length 1) {return nums[0];} else if (length 2) {return Math.max(nums[0], nums[1]);}return Math.max(robRange(nums, 0, length - 2), robRange(nums, 1,…

小试牛刀-区块链代币锁仓(Web页面)

Welcome to Code Blocks blog 本篇文章主要介绍了 [区跨链代币锁仓(Web页面)] ❤博主广交技术好友&#xff0c;喜欢我的文章的可以关注一下❤ 目录 1.编写目的 2.开发环境 3.实现功能 4.代码实现 4.1 必要文件 4.1.1 ABI Json文件(LockerContractABI.json) 4.2 代码详解…

AI绘画-Stable Diffusion 原理介绍及使用

引言 好像很多朋友对AI绘图有兴趣&#xff0c;AI绘画背后&#xff0c;依旧是大模型的训练。但绘图类AI对计算机显卡有较高要求。建议先了解基本原理及如何使用&#xff0c;在看看如何实现自己垂直行业的绘图AI逻辑。或者作为使用者&#xff0c;调用已有的server接口。 首先需…

单片机软件架构连载(3)-typedef

今天给大家讲typedef&#xff0c;这个关键字在实际产品开发中&#xff0c;也是海量应用。 技术涉及知识点比较多&#xff0c;有些并不常用&#xff0c;我们以贴近实际为原则&#xff0c;让大家把学习时间都花在重点上。 1.typedef的概念 typedef 是 C 语言中的一个关键字&…

DP:背包问题----0/1背包问题

文章目录 &#x1f497;背包问题&#x1f49b;背包问题的变体&#x1f9e1;0/1 背包问题的数学定义&#x1f49a;解决背包问题的方法&#x1f499;例子 &#x1f497;解决背包问题的一般步骤&#xff1f;&#x1f497;例题&#x1f497;总结 ❤️❤️❤️❤️❤️博客主页&…

【RflySim学习笔记】1.RflySim的绪论

目录 文章目录 目录1.RflySim 平台背景2.RflySim 平台特点3.RflySim 平台核心组件介绍3.1 CopterSim3.2 RflySim3D/RflySimUE5UE引擎&#xff1a;RflySim3D/RflySimUE5 3.3 QGroundControl地面站3.4 Python38Env3.5 MATLAB自动代码生成工具箱3.6 SITL/HITL批处理脚本3.7 PX4 Fi…

springboot+vue+mybatis前台点菜系统+PPT+论文+讲解+售后

21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息存储达到…

Golang | Leetcode Golang题解之第214题最短回文串

题目&#xff1a; 题解&#xff1a; func shortestPalindrome(s string) string {n : len(s)fail : make([]int, n)for i : 0; i < n; i {fail[i] -1}for i : 1; i < n; i {j : fail[i - 1]for j ! -1 && s[j 1] ! s[i] {j fail[j]}if s[j 1] s[i] {fail[i…

SDIO学习(2)--SD 2.0协议

目录 1. SD卡简介 1.1 SD卡概念 1.2 SD卡外形和接口 2. SD 2.0主要特性 3. SD 卡系统概念 3.1 读写属性 3.2 总线拓扑结构 3.2.1 SD模式 3.2.2 SPI模式 3.3 SD 2.0总线协议 3.3.1 命令&#xff08;Command&#xff09; 3.3.1.1 命令分类 3.3.1.2 命令格式 3.3.1.…