vue配置路由时报错 Error in render: "RangeError: Maximum call stack size exceeded"
虽然标题写的是配置路由报错,最终也是通过修改路由解决的,但是导致报错的还有一个主要因素,是因为我增加了一个功能“页面刷新时,根据url高亮左侧导航”,如下图:

1、页面刷新,根据url高亮左侧导航代码如下:
// 刷新页面时根据url高亮左侧导航选项
highLightLeftNav() {
this.firstIndexCur = -1;
this.secondIndexCur = -1;
let pathName = this.$router.history.current.path;
this.customNav.forEach((item, index) => {
if(pathName.indexOf(item.pathUrl) !== -1) { // 高亮一级导航
this.firstIndexCur = index;
}else if(item.secondLevelNavList.length){
item.secondLevelNavList.forEach((sonItem, sonIndex) => { // 高亮二级导航
if(pathName.indexOf(sonItem.pathUrl) !== -1) {
this.secondIndexCur = index + ',' + sonIndex;
}
});
}
});
}
(插个题外话,只有一级导航的时候高亮特别简单用 :class=' { "active" ? currentIndex == index } ' 即可实现,而二级导航的时候就比较复杂了,具体如何实现可以看我的另一篇博客:vue高亮一级、二级导航)
转回正题,看一下路由部分的代码
2、路由部分代码

个人理解之所以报错就是因为页面挂载完毕,如果按照配置路由选项默认高亮第一个,而按照①中刷新页面高亮某个导航就不定了,此时既要高亮第一个,又要高亮其他的就会报错
vue配置路由时报错 Error in render: "RangeError: Maximum call stack size exceeded"的更多相关文章
- Vue -- 项目报错整理(1):RangeError: Maximum call stack size exceeded
这几天项目运行报了个错: Uncaught RangeError: Maximum call stack size exceeded,刚开始看到 "returnNodeParameter&q ...
- 浏览器JS报错Uncaught RangeError Maximum call stack size exceeded
JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...
- vue报错Error in v-on handler: "RangeError: Maximum call stack size exceeded"
看下面的报错 错误 看到这个错误一脸懵逼.后面了解到,是因为程序进入了死循环,后面检查了我的代码,原来在这里自己调用自己
- 浏览器JS报错Uncaught RangeError: Maximum call stack size exceeded?
JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...
- too much recursion(太多递归)Uncaught RangeError: Maximum call stack size exceeded BootstrapValidator报错
在BootstrapValidator中已默认遵守Bootstrap规则,form里的每个输入项目必需包含在类为form-group的标签里,否则BootstrapValidator中定义的field ...
- npm install报错Unhandled rejection RangeError: Maximum call stack size exceededill install
故障 在使用npm install下载依赖的时候报错Unhandled rejection RangeError: Maximum call stack size exceededill instal ...
- jq ajax请求error: Maximum call stack size exceeded
原因是data中参数iconUrl这个变量未声明导致的.jq在内部循环时报错
- vue 使用 element-ui 时报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf
在vue项目中引用 element-ui 时,虽然按照 element-ui 的官方文档一步步操作,还是产生了下面的错误 解决这个问题的方法,就是在 web pack.config.js 文件中进 ...
- 解决 vue 使用 element 时报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf
在 webpack.config.js 中加入这个依赖 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }
随机推荐
- RequestsLibrary接口测试
RequestsLibrary常用的关键字 关 键 字 描 述 Create Session 创建HTTP会话 Get Request 采用get方式请求 Post Request 采用Pos ...
- Linux 关机/重启命令
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE MicrosoftInternetExplorer4 /* Style Definiti ...
- c# 动态编译CodeDomProvider.CompileAssemblyFromSource(CompilerParameters cp,string code)
1.使用c#动态编译,可参考如下: //生成c#代码 string code = GenerateCode(); CodeDomProvider cdp = CodeDomProvider.Creat ...
- Eclipse使用git发布项目到github
因为一直都在使用svn,今天尝试了下git,记录下来既是方便自己以后查看,也是分享一些经验! 废话不多说,撸起袖子就是干!!! 1.选中要上传的项目右键 2.选中git 3.在图上打钩,点击所要上传的 ...
- Linux 查看登录用户信息 who & whoami
Linux 查看登录用户信息 who & whoami 在一台服务器上,同一时间往往会有很难多人同时登录. who 命令可以查看当前系统中有哪些人登录,以及他们都工作在哪个控制台上. 这样可以 ...
- Linux crontab 每5秒钟执行一次 shell 脚本 的方法
Linux crontab 每5秒钟执行一次 shell 脚本 的方法 由于 Linux 的 crontab 的定时命令格式如下: minute hour day-of-month month-of- ...
- IntelliJ IDEA 2018 for Mac专业使用技巧
IntelliJ IDEA 2018 for Mac是一个综合性的Java编程环境,被许多开发人员和行业专家誉为市场上最好的IDE,它提供了一系列最实用的的工具组合:智能编码辅助和自动控制,支持J2E ...
- Python爬虫学习==>第八章:Requests库详解
学习目的: request库比urllib库使用更加简洁,且更方便. 正式步骤 Step1:什么是requests requests是用Python语言编写,基于urllib,采用Apache2 Li ...
- IntelliJ IDEA 2018.2激活
IntelliJ IDEA 2018.2激活 下载补丁 下载补丁JetbrainsIdesCrack-4.2.jar 下载链接 修改文件 将文件JetbrainsIdesCrack-4.2.jar放在 ...
- 【神经网络与深度学习】如何在Caffe中配置每一个层的结构
如何在Caffe中配置每一个层的结构 最近刚在电脑上装好Caffe,由于神经网络中有不同的层结构,不同类型的层又有不同的参数,所有就根据Caffe官网的说明文档做了一个简单的总结. 1. Vision ...